Searchable Lightning Combobox in Lightning Web Component

In Salesforce Lightning Web Components, we have a Lightning-Combobox component feature through which we can display values in the dropdown, such as picklist values. However, this component doesn’t have a search feature to search and select the values.

When multiple picklist values or a large amount of data need to be displayed in the combo box, we require the search bar feature to be deployed.

In this Salesforce tutorial, we will learn about the lightning-combobox and how to add a searchable lightning-combobox in the lightning web component.

Lightning Combobox in Lightning Web Component

In Salesforce, the Lightning Combobox combines the values of a data set in a drop-down list box with the input fields to allow users to select from a list of options. We generally use the Lightning Combobox inside the Lightning web component for scenarios when we need to display the lookup or picklist field. This component allows the user to select one option at a time from the combobox dropdown.

Add a Lightning Combobox in Salesforce Lightning Web Component

In the example below, we will display picklist values inside the lightning web component using the lightning combobox, and we will also add the search feature to make the combobox values searchable.

In this lightning web component, the combobox will display a list of the Account records as a picklist, from where we can search and select an account record.

1. Create an apex controller class from where we will fetch the account records and display them as a picklist in the lightning combobox.

public with sharing class Combobox {
    @AuraEnabled
    public static List<Account> getAccounts(){
        return [Select Id,Name from Account LIMIT 10];
    }
}

2. Create a Lightning web component and enter the code below in the HTML file to define the LWC’s UI.

In the HTML template, we have used the <lightning-combobox> tag to add the combobox that will display the values from defined options in the JavaScript logic.

<template>
    <lightning-combobox name="Accounts"
                        label="Select Account"
                        options={options}
                        value={value}
                        onchange={handleonchange}>
    </lightning-combobox>
    <p>The selected value is : {value}</p>
</template>

3. After this, enter the code below in the Js file to fetch and display the account values as a picklist in the lighting combobox.

import { LightningElement, track } from 'lwc';
import displayacc from '@salesforce/apex/Combobox.getAccounts';
export default class SearchableCombobox extends LightningElement {

    value = '';
   @track accOptions = [];
    get options() {
        return this.accOptions;
    }

    connectedCallback(){
        displayacc()
        .then(result =>{
            let arr = [];
            for(var i=0; i<result.length ; i++){
                arr.push({label : result[i].Name, value : result[i].Id});
            }
            this.accOptions = arr;
        })    
    }

    handleonchange(event){
        this.value = event.detail.value;
    }
}

4. Make the component accessible to the lightning pages using the code below in the meta.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>63.0</apiVersion>
     <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Now, deploy the Lightning web component on a Lightning page. The picklist values will appear in the Lightning Combobox dropdown.

In the Lightning Web Component, we will see the picklist options in the lightning combobox.

This way, we can add a drop-down combo box to the lighting web component using the “lighting-combobox” component.

Adding a Search Bar in LWC Combobox

In the Lightning Web Components, the lightning-combobox does not support real-time searching and filtering dynamically.

The best way is to create a custom dropdown that displays all options initially but filters as users type. For this, we can use the lightning input and set its type to search so that we can search and select a picklist from the same field.

Follow the steps below to create a dropdown that includes the search bar to search and select the values from the dropdown.

In this controller class, we will use the same controller class that we have created to fetch the account records.

1. Create a lightning web component and enter the code below in the HTML file.

<template>
    <div class="slds-combobox_container">
        <div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
            <lightning-input type="text"
                             label="Search & Select Account"
                             value={searchKey}
                             onfocus={toggleDropdown}
                             onblur={handleBlur}
                             onchange={handleSearch}
                             placeholder="Search or Select an Account">
            </lightning-input>

            <div if:true={showDropdown} class="slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid">
                <ul class="slds-listbox slds-listbox_vertical" role="listbox">
                    <template for:each={filteredOptions} for:item="option">
                        <li key={option.value} role="presentation" 
                            class="slds-listbox__item"
                            onclick={handleSelect}>
                            <div class="slds-media slds-listbox__option slds-listbox__option_plain"
                                 role="option"
                                 data-value={option.value}
                                 data-label={option.label}>
                                <span class="slds-media__body">
                                    <span class="slds-truncate">{option.label}</span>
                                </span>
                            </div>
                        </li>
                    </template>
                </ul>
            </div>
        </div>
    </div>

    <p>The selected value is: {value}</p>
</template>

2. After this, enter the code below in the Js file of the lightning web component.

import { LightningElement, track } from 'lwc';
import displayacc from '@salesforce/apex/Combobox.getAccounts';

export default class SearchableCombobox extends LightningElement {
    value = '';
    searchKey = '';
    @track accOptions = [];
    @track filteredOptions = [];
    @track showDropdown = false;

    connectedCallback() {
        displayacc()
            .then(result => {
                let arr = result.map(acc => ({ label: acc.Name, value: acc.Id }));
                this.accOptions = arr;
                this.filteredOptions = arr;
            });
    }

    handleSearch(event) {
        this.searchKey = event.target.value.toLowerCase();
        this.filteredOptions = this.accOptions.filter(option =>
            option.label.toLowerCase().includes(this.searchKey)
        );
        this.showDropdown = true;  
    }

    handleSelect(event) {
        this.value = event.currentTarget.dataset.value;
        this.searchKey = event.currentTarget.dataset.label;
        this.showDropdown = false;  
    }

    toggleDropdown() {
        this.showDropdown = true; 
    }

    handleBlur() {
        setTimeout(() => {
            this.showDropdown = false;  
        }, 200);
    }
}

3. Make the lightning web component visible to the lighting pages using the below code in the meta.xml file.

isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

4. Now, deploy the lightning web component to the lightning page, and there you will see the search option is enabled in the picklist dropdown field.

This way, we can add the search feature on the picklist drop-down field in the lightning web component.

Conclusion

In this Salesforce tutorial, we have learned how to utilize the Lightning-Combobox component in Lightning Web Components to display picklist values and add a custom search feature. By integrating an Apex controller to retrieve data and implementing a searchable dropdown with lightning-input and filtering, we’ve improved usability for handling large datasets, making it a practical solution for Salesforce applications.

You may also like to read:

• How to Rename Lightning Web Component in Salesforce?
• Get Record ID In Salesforce Lightning Web Component
• How to Generate PDF Using jsPDF In Lightning Web Component?
• Create Lightning Web Component In Salesforce Developer Console
• Override Standard Button Using Lightning Web Component (LWC)
• Custom Image Slider in Salesforce Using Lightning Web Component
• Create Custom Calendar Using Lightning Web Components in Salesforce

Bijay Kumar

I am Bijay Kumar, the founder of SalesforceFAQs.com. Having over 10 years of experience working in salesforce technologies for clients across the world (Canada, Australia, United States, United Kingdom, New Zealand, etc.). I am a certified salesforce administrator and expert with experience in developing salesforce applications and projects. My goal is to make it easy for people to learn and use salesforce technologies by providing simple and easy-to-understand solutions. Check out the complete profile on About us.