How to create single/multiple Picklist with search bar in Lightning Component Salesforce

Hello friends, today we will learn to create single or multi select picklist with search bar. We will customize the things and create this because standard combobox in Lightning Component doesn’t have such type of functionality .

Key Heighlights :

You can search the picklist values
In multiselect we create pills so you can remove easily on pills.
this component is reusable
There are 2 components so child is main and parent where we get selected options.
Multi Select Combobox component is advance then dual-listbox because this cover small space and dual cover big space.

MultiSelectCombobox.cmp :

<aura:component>
    
    <!-- Attributes that can be set while component calling-->
    <aura:attribute name="options" type="string" default="" required="true" />
    <aura:attribute name="value" type="String" default="" description="Selected value in single Select" />
    <aura:attribute name="values" type="List"   default="" description="Selected value in Multi Select" />
    <aura:attribute name="label" type="string" default="" description="Label will be displayed above input Box" />
    <aura:attribute name="minChar" type="Integer" default="1" description="Minimum character to type for search" />
    <aura:attribute name="disabled" type="Boolean" default="false" description="Disable the combobox" />
    <aura:attribute name="multiSelect" type="Boolean" default="false" description="Switch between single and multiSelect" />
    
    <!-- Internal Use Attributes -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="searchString"   type="string" default="" description="String to search"/>
    <aura:attribute name="message"   type="String" default="" />
    
    <!-- Component Markup -->
    <div>
        <aura:if isTrue="{!!empty(v.label)}">
            <label class="slds-form-element__label">{!v.label}</label>
        </aura:if>
        <div class="slds-combobox_container">
            <div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open" aura:id="resultsDiv" aria-expanded="true" aria-haspopup="listbox" role="combobox">
                <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
                    <lightning:input disabled="{!v.disabled}" aura:id="inputLookup" class="inputBox" placeholder="Select an Option" onblur="{!c.handleBlur}" onclick="{!c.showOptions}" onkeyup="{!c.filterOptions}" value="{!v.searchString}" autoComplete="off" variant="label-hidden" id="combobox-id-1" />
                    <lightning:icon class="slds-input__icon" iconName="utility:down" size="x-small" alternativeText="search"/>
                </div>
                <!-- Dropdown List -->
                <div id="listbox-id-1" class="slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid" style="{! 'max-height:' + (8 + (v.recordCount * 40)) + 'px' }">
                    <ul class="slds-listbox slds-listbox_vertical recordListBox" role="presentation">
                        <aura:if isTrue="{!empty(v.message)}" >
                            <!-- To display Drop down List -->
                            <aura:iteration items="{!v.options}" var="option" >
                                <aura:if isTrue="{!option.disabled}">
                                    <li class="{!'slds-listbox__item disabledItem' + if(option.isVisible,'',' slds-hide')}">
                                        <span class="slds-media slds-listbox__option_entity verticalAlign slds-truncate">{!option.label}</span>
                                    </li>
                                    <aura:set attribute="else">
                                        <li id="{!option.value}" class="{!'slds-listbox__item eachItem' + if(option.isVisible,'',' slds-hide')}" onmousedown="{!c.selectItem}">
                                            <lightning:icon class="{!if(option.selected,'','slds-hide')}" iconName="utility:check" size="x-small" alternativeText="icon" />
                                            <span class="slds-media slds-listbox__option_entity verticalAlign slds-truncate">{!option.label}</span>
                                        </li>
                                    </aura:set>
                                </aura:if>
                            </aura:iteration>
                            <!-- To display Error Message -->
                            <aura:set attribute="else">
                                <li class="slds-listbox__item">
                                    <span class="slds-media slds-listbox__option_entity verticalAlign slds-truncate">{!v.message}</span>
                                </li>
                            </aura:set>
                        </aura:if>
                    </ul>
                </div>
            </div>
        </div>
        
        <aura:iteration items="{!v.options}" var="option">
            <aura:if isTrue="{!option.selected}">
                <lightning:pill class="slds-m-around_xx-small" name="{!option.value}" label="{!option.label}" onremove="{!c.closePill}"/>
            </aura:if>
        </aura:iteration>
    </div>
</aura:component>

MultiSelectCombboxController.Js :

({
    doInit : function( component, event, helper ) {
        helper.doInitStartHelper(component);
    },
    
    //search option in picklist
    filterOptions : function( component, event, helper ) {
        if( !$A.util.isEmpty(component.get('v.searchString')) ) {
            helper.filterOptionsDataHelper(component);
        } else {
            $A.util.removeClass(component.find('resultsDiv'),'slds-is-open');
        }
    },
    
    // option selected
    selectItem : function( component, event, helper ) {
        if(!$A.util.isEmpty(event.currentTarget.id)) {
            helper.selectOptionHelper(component, event);
        }
    },
    
    showOptions : function( component, event, helper ) {
        var disabled = component.get("v.disabled");
        if(!disabled) {
            component.set("v.message", '');
            component.set('v.searchString', '');
            var options = component.get("v.options");
            options.forEach( function(element,index) {
                element.isVisible = true;
            });
            component.set("v.options", options);
            if(!$A.util.isEmpty(component.get('v.options'))) {
                $A.util.addClass(component.find('resultsDiv'),'slds-is-open');
            } 
        }
    },
    
    // To remove the selected item.
    closePill : function( component, event, helper ){
        helper.removeOptionPillHelper(component, event);
    },
    
    // To close the dropdown if clicked outside the dropdown.
    handleBlur : function( component, event, helper ){
        helper.handleBlurHelper(component, event);
    },
})

MultiSelectCombboxHelper.Js :

({
    doInitStartHelper : function(component) {
        $A.util.toggleClass(component.find('resultsDiv'),'slds-is-open');
        var value = component.get('v.value');
        var values = component.get('v.values');
        if( !$A.util.isEmpty(value) || !$A.util.isEmpty(values) ) {
            var searchString;
            var count = 0;
            var multiSelect = component.get('v.multiSelect');
            var options = component.get('v.options');
            options.forEach( function(element, index) {
                if(multiSelect) {
                    if(values.includes(element.value)) {
                        element.selected = true;
                        count++;
                    }  
                } else {
                    if(element.value == value) {
                        searchString = element.label;
                    }
                }
            });
            if(multiSelect)
                component.set('v.searchString', count + ' options selected');
            else
                component.set('v.searchString', searchString);
            component.set('v.options', options);
        }
    },
    
    filterOptionsDataHelper : function(component) {
        component.set("v.message", '');
        var searchText = component.get('v.searchString');
        var options = component.get("v.options");
        var minChar = component.get('v.minChar');
        if(searchText.length >= minChar) {
            var flag = true;
            options.forEach( function(element,index) {
                if(element.label.toLowerCase().trim().startsWith(searchText.toLowerCase().trim())) {
                    element.isVisible = true;
                    flag = false;
                } else {
                    element.isVisible = false;
                }
            });
            component.set("v.options",options);
            if(flag) {
                component.set("v.message", "No results found for '" + searchText + "'");
            }
        }
        $A.util.addClass(component.find('resultsDiv'),'slds-is-open');
    },
    
    selectOptionHelper : function(component, event) {
        var options = component.get('v.options');
        var multiSelect = component.get('v.multiSelect');
        var searchString = component.get('v.searchString');
        var values = component.get('v.values') || [];
        var value;
        var count = 0;
        options.forEach( function(element, index) {
            if(element.value === event.currentTarget.id) {
                if(multiSelect) {
                    if(values.includes(element.value)) {
                        values.splice(values.indexOf(element.value), 1);
                    } else {
                        values.push(element.value);
                    }
                    element.selected = element.selected ? false : true;   
                } else {
                    value = element.value;
                    searchString = element.label;
                }
            }
            if(element.selected) {
                count++;
            }
        });
        component.set('v.value', value);
        component.set('v.values', values);
        component.set('v.options', options);
        if(multiSelect)
            component.set('v.searchString', count + ' options selected');
        else
            component.set('v.searchString', searchString);
        if(multiSelect)
            event.preventDefault();
        else
            $A.util.removeClass(component.find('resultsDiv'),'slds-is-open');
    },
    
    removeOptionPillHelper : function(component, event) {
        var value = event.getSource().get('v.name');
        var multiSelect = component.get('v.multiSelect');
        var count = 0;
        var options = component.get("v.options");
        var values = component.get('v.values') || [];
        options.forEach( function(element, index) {
            if(element.value === value) {
                element.selected = false;
                values.splice(values.indexOf(element.value), 1);
            }
            if(element.selected) {
                count++;
            }
        });
        if(multiSelect)
            component.set('v.searchString', count + ' options selected');
        component.set('v.values', values)
        component.set("v.options", options);
    },
    
    handleBlurHelper : function(component, event) {
        var selectedValue = component.get('v.value');
        var multiSelect = component.get('v.multiSelect');
        var previousLabel;
        var count = 0;
        var options = component.get("v.options");
        options.forEach( function(element, index) {
            if(element.value === selectedValue) {
                previousLabel = element.label;
            }
            if(element.selected) {
                count++;
            }
        });
        if(multiSelect)
            component.set('v.searchString', count + ' options selected');
        else
            component.set('v.searchString', previousLabel);
        
        if(multiSelect)
            $A.util.removeClass(component.find('resultsDiv'),'slds-is-open');
    }
})

MultiSelectCombobox.css :

.THIS .verticalAlign {
    cursor: pointer;
    padding: 0px 5px !important;
}
.THIS .slds-dropdown {
    padding:0px !important;
}
.THIS .fullWidth {
    width: 100% !important;
}
.THIS .disabledItem {
    color: #bbb;
    cursor: no-drop; 
}
.THIS .recordListBox {
    margin-top:0px !important;
    overflow-y: scroll;
}
.THIS .slds-listbox li {
    padding: .45rem 0.7rem !important;
    display: flex;
}
.THIS .inputBox input {
    padding-left: 10px;
}
.THIS .eachItem:hover {
    background-color: #F1F1F1;
    cursor: pointer;
}
.THIS .inputIcon {
    z-index: 99;
    padding: 2px 0;
}

/* For Scrolling */
.THIS ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
.THIS ::-webkit-scrollbar-track {
    display: none !important;
}
.THIS ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0,0,0,0.4);
}

We will put this on Parent component

MultiSelectComboboxParent.cmp :

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <aura:attribute name="options" type="List" default="[{'label':'Mango','value':'Mango'},
                                                        {'label':'Apple','value':'Apple'},
                                                        {'label':'Grapes','value':'Grapes'},
                                                        {'label':'Banana','value':'Banana'}]" />
    
    <aura:attribute name="options2" type="List" default="[{'label':'India','value':'India'},
                                                        {'label':'Usa','value':'Usa'},
                                                        {'label':'China','value':'China'},
                                                        {'label':'Japan','value':'Japan'}]" />
    
    <aura:attribute name="selectedValue" type="String" default="" description="Selected value in single Select" />
    <aura:attribute name="selectedValues" type="List" default="" description="Selected value in Multi Select" />

    
    <div class="slds-tabs_card">
        <div class="slds-page-header">
            <div class="slds-page-header__row">
                <div class="slds-page-header__col-title">
                    <div class="slds-media">
                        <div class="slds-media__figure">
                            <span class="slds-icon_container slds-icon-standard-opportunity">
                                <lightning:icon iconName="standard:event" alternativeText="Event" title="Event" />
                            </span>
                        </div>
                        <div class="slds-media__body">
                            <div class="slds-page-header__name">
                                <div class="slds-page-header__name-title">
                                    <h1>
                                        <span>Lightning Component Combobox</span>
                                        <span class="slds-page-header__title slds-truncate" title="TechDicer">TechDicer</span>
                                    </h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> <br/>
    
    <lightning:card variant="Narrow" title="ComboBox">
        <div class="slds-p-horizontal_small">
            <c:MultiSelectCombobox options="{!v.options}" value="{!v.selectedValue}" label="Single Select Combobox"/>
            <br/>
            <c:MultiSelectCombobox options="{!v.options2}" values="{!v.selectedValues}" multiSelect="true" label="Multi Select Combobox"/>
        </div>
    </lightning:card>
</aura:component>

What’s your Reaction?

Post Views: 3,612

Lightning Salesforce

2 comments

Frederic May 16, 2022 - 2:45 pm

Hi,Thanks for sharing that! Unfortunately, I cant change input parameter to define picklists values and Multi vs Single etc.. Did you forget to add the design ressource?

Rijwan Mohmmed May 23, 2022 - 3:35 pm

Hi @Frederic
Can you please explain more about this?

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

How to create single/multiple Picklist with search bar in Lightning Component Salesforce

Add validation on fields in Lightning Component Salesforce

Create Single/Multi-Select Combobox / Picklist in LWC Salesforce

You may also like

2 comments

Leave a Comment Cancel Reply

Our Visitor