0

Is it possible to have search functionality for a lightning:select component within an aura:iteration?

I'm looking for the following picklist to have a search as there will be lots more options being added in the future:

enter image description here

Here's the code as well:

<aura:iteration items="{!v.IncomeObjectivesType}" var="IncomeObjectiveType">
    <lightning:select aura:id="{!IncomeObjectiveType.id}"
                      value="{!IncomeObjectiveType.value}"
                      label="{!IncomeObjectiveType.label}"
                      class="IncomeObjectives slds-m-top_medium">
        <option value="">-- Please select --</option>
        <option value="Cash ISA">Cash ISA</option>
        <option value="Deposit Account">Deposit Account</option>
        <option value="Investment Bonds">Investment Bonds</option>
        <option value="Investments">Investments</option>
        <option value="ISA">ISA</option>
        <option value="National Savings">National Savings</option>
        <option value="Other">Other</option>
        <option value="Stocks and Shares">Stocks and Shares</option>
    </lightning:select>
</aura:iteration>  

Any questions let me know :)

1
  • Look for Strike components, they had a select component supporting search and groupings.
    – manjit5190
    Mar 7, 2020 at 21:10

2 Answers 2

0

You could achieve this requirement by not using only lightning select but a combination of lightning input of type search ,where based on user input, you can set the options in a lightning select.

1
  • 1
    Thanks for your answer. Do you have any examples or documentation you can share on this approach? Thanks.
    – user78806
    Mar 11, 2020 at 11:10
0

I have created custom field to show picklist values and also, we can filter the picklist values based on the entered input text. Note:- Lightning:Select does not allow you to search picklist value by entering the text. So, I used custom code to achieve this. You can create a searchable picklist with below code:-

Image 1

enter image description here

AURA CMP -->>

<aura:attribute name="selectRecordName" type="String"/>
<aura:attribute name="picklistValues" type="List"/>
<aura:attribute name="currentText" type="String"/>

<div onfocusout="{!c.closeDropDown}">         
    <div class="slds-combobox_container slds-size--1-of-2 slds-p-horizontal_x-small">
        <div class="slds-size--1-of-1 slds-p-horizontal_x-small slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" aura:id="resultBox" aria-expanded="false" aria-haspopup="listbox" role="combobox">
            <!-- below lightning:input is for user to type text -->
            <div class="slds-form-element__control" role="none">                 
                <lightning:input  aura:id="userinput" label="Field Label" name="searchText" onchange="{!c.searchField}" onclick="{!c.getPickListValues}" value="{!v.selectRecordName}" type="search" class="leftspace"/>
            </div>
            <!-- below code is for showing picklist values based on the text-->
            <div id="listbox-id-1" class="slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid" role="listbox">
                <ul class="slds-listbox slds-listbox_vertical" role="presentation" >
                    <aura:iteration items="{!v.picklistValues}" var="serecord" indexVar="hdtv">
                        <li role="presentation" class="slds-listbox__item">
                            <div data-name="{!serecord}" onmousedown="{!c.setSelectedRecord}"  class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
                                <span class="slds-media__body">
                                    <span class="slds-listbox__option-text slds-listbox__option-text_entity">{!serecord}</span>
                                </span>
                            </div>
                        </li>
                    </aura:iteration>
                </ul>
            </div>
            
        </div>  
    </div>
</div> 

CONTROLLER JAVASCRIPT -->>

//when clicking on field
getPickListValues : function(component, event, helper) {
    var newList=[];
    const list = ['Apples','Apricots','Avocados','Bananas','Blueberries','Cherries','Grapefruit','Jackfruit','Kiwi','Lime','Mango','Oranges','Peach','Raspberries','Tomato','Watermelon'];
    component.set("v.picklistValues", list);
    var resultBox = component.find('resultBox');
    if(component.get("v.currentText") != undefined) {
        for(var i=0;i<list.length;i++){
            var iterator= list[i];
            if(iterator.toLowerCase().includes(component.get("v.currentText").toLowerCase())){
                newList.push(iterator);
            }
        }
        component.set("v.picklistValues", newList);               
        if(component.get("v.picklistValues").length == 0) {
            $A.util.removeClass(resultBox, 'slds-is-open');
        }else{
            $A.util.addClass(resultBox, 'slds-is-open');
        }
    }else{
        $A.util.addClass(resultBox, 'slds-is-open');
    }
},

// When user types the value in field
searchField : function(component, event, helper) {
    const list = ['Apples','Apricots','Avocados','Bananas','Blueberries','Cherries','Grapefruit','Jackfruit','Kiwi','Lime','Mango','Oranges','Peach','Raspberries','Tomato','Watermelon'];
    component.set("v.picklistValues", list);
    var resultBox = component.find('resultBox');
    var currentText =event.getSource().get("v.value");
    component.set("v.currentText", currentText);
    component.set("v.selectRecordName", currentText);
    var newList=[];
    if(currentText.length > 0) {
        for(var i=0;i<list.length;i++){
            var iterator= list[i];
            if(iterator.toLowerCase().includes(currentText.toLowerCase())){
                newList.push(iterator);
            }
        }
        component.set("v.picklistValues", newList);
        
        if(component.get("v.picklistValues").length == 0) {
            $A.util.removeClass(resultBox, 'slds-is-open');
        }else{
            $A.util.addClass(resultBox, 'slds-is-open');
        }
    }
    else {
        $A.util.addClass(resultBox, 'slds-is-open');
    }
},


//When user selects a record, set it as selected
setSelectedRecord : function(component, event, helper) {
    component.set("v.selectRecordName", event.currentTarget.dataset.name);
    component.set("v.currentText", event.currentTarget.dataset.name);
    var resultBox = component.find('resultBox');
    $A.util.removeClass(resultBox, 'slds-is-open');
}, 

//Function when user clicks outside Component to close the dropdown list
closeDropDown : function(component, event, helper) {
    var resultBox = component.find('resultBox');
    $A.util.removeClass(resultBox, 'slds-is-open');
},

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .