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/metadat