Searchable Lightning Combobox LWC

Question

Hello guys I have a lightning combobox that has like 600 values. I would like to be able to search the values instead of scrolling.

My .js code is this one:

picklistOrdered = [];
    connectedCallback(){
        getValuesFromTable().then((result) => {
            this.picklistOrdered = result.map(({value: label, key: value}) => ({ label,value}))
            this.picklistOrdered = this.picklistOrdered.sort((a,b)=>{
                if(a.label < b.label){
                    return -1
                }
            })
        })
    }

Could someone help me and put an example? Thanks

Answer 1

It's a simpler implementation of the "searchable combobox" as Damecek proposed in the comments under the question.

I used the standard lightning-input component of type "search" and the blueprint of the combobox options from SLDS to imitate its usual appearance. It has the basic functionality of displaying all options on input focus, as the default combobox does, and filters picklist options based on user's input.

The only problem, options are not being hidden on blur.

html

<template>
    <div class="slds-card slds-p-around_medium">
        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <lightning-input label="Searchable Combobox" type="search" onfocus={showPicklistOptions}
                    onchange={search} value={selectedValue}>
                </lightning-input>
                <div if:true={searchResults} class="slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid"
                    role="listbox">
                    <ul class="slds-listbox slds-listbox_vertical" role="presentation">
                        <template for:each={searchResults} for:item="searchResult">
                            <li key={searchResult.value} data-value={searchResult.value} role="presentation"
                                onclick={selectSearchResult} class="slds-listbox__item">
                                <div class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small "
                                    role="option">
                                    <span class="slds-media__body">
                                        <span class="slds-truncate" title={searchResult.label}>
                                            {searchResult.label}
                                        </span>
                                    </span>
                                </div>
                            </li>
                        </template>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

js

export default class SearchableCombobox extends LightningElement {
  picklistOrdered;
  searchResults;
  selectedSearchResult;

  get selectedValue() {
    return this.selectedSearchResult ? this.selectedSearchResult.label : null;
  }

  connectedCallback() {
    getValuesFromTable().then((result) => {
        this.picklistOrdered = result.map(({value: label, key: value}) => ({ label,value}))
        this.picklistOrdered = this.picklistOrdered.sort((a,b)=>{
            if(a.label < b.label){
                return -1
            }
        })
    })
  }

  search(event) {
    const input = event.detail.value.toLowerCase();
    const result = this.picklistOrdered.filter((picklistOption) =>
      picklistOption.label.toLowerCase().includes(input)
    );
    this.searchResults = result;
  }

  selectSearchResult(event) {
    const selectedValue = event.currentTarget.dataset.value;
    this.selectedSearchResult = this.picklistOrdered.find(
      (picklistOption) => picklistOption.value === selectedValue
    );
    this.clearSearchResults();
  }

  clearSearchResults() {
    this.searchResults = null;
  }

  showPicklistOptions() {
    if (!this.searchResults) {
      this.searchResults = this.picklistOrdered;
    }
  }
}

demo