Searchable Dual Picklist

Multi Select Dual Picklist are available as a base component in component library of the Lightning Web Component. When available picklist values are more in numbers, users might find very hard to search the right picklist value. We are going to deliver Searchable Dual Picklist in this blog. We will use the base component lightning-dual-listbox along with our own serach boxes attached to it.

Adding serach option in dual picklist component improves the user experience. This will also improve the page performance.

Let’s create a multi picklist component with search option named as multipicklistSearch. Its time to dive into code.

multipicklistSearch.html

We have added two custom input serach on top of multi select dual picklist base component to make it searchable dual picklist. First one search for available picklist values whereas second one search for selected picklist value in dual picklist component.

<template>
    <div class="slds-var-p-around_medium">
        <div class="slds-grid slds-gutters slds-var-p-bottom_medium">
            <div class="slds-col">
                <lightning-input type="text" label="Search Picklist Available values"
                    onchange={handleAvailableSearch}></lightning-input>
            </div>
            <div class="slds-col">
                <lightning-input type="text" label="Search Picklist Selected values"
                    onchange={handleSelectedSearch}></lightning-input>
            </div>
        </div>
        <lightning-dual-listbox name="languages" label="Select Languages" source-label="Available"
            selected-label="Selected" field-level-help="Select your preferred languages" options={options}
            onchange={handleChange} value={selected}>
        </lightning-dual-listbox>
    </div>
</template>

multipicklistSearch.js

We have hardcoded the available picklist values in the dual picklist component, you can get it dynamically too. We have functions to search in available picklist values as well as selected picklist values.

handleAvailableSearch – This function invokes when user serach in available picklist values

handleSelectedSearch – This function invokes when user search in selected picklist vaues

searchData – This is a generic function to handle the search in the array. It is used in both handleAvailableSearch and handleSelectedSearch function.

import { LightningElement } from 'lwc';

export default class MultipicklistSearch extends LightningElement {
    selected = []; //Selected values
    selectedAll = []; //Selected values array with label and value
    remainingAvailable = []; //

    //List of options available for Multi-Select Picklist
    data = [{ label: 'English', value: 'en' },
    { label: 'German', value: 'de' },
    { label: 'Spanish', value: 'es' },
    { label: 'French', value: 'fr' },
    { label: 'Italian', value: 'it' },
    { label: 'Japanese', value: 'ja' },];
    options = this.data;

    handleChange(event) {
        //Selected values
        this.selected = event.detail.value;
        this.selectedAll = [];

        //Maintain selected values array with label and value
        this.data.forEach((element) => {
            this.selected.forEach((selectedValue) => {
                if (element.value === selectedValue && this.selectedAll.filter(e => e.value === selectedValue).length === 0) {
                    this.selectedAll.push(element);
                }
            });
        });

        //Maintain non-selected values array
        this.remainingAvailable = [];
        this.data.forEach((element) => {
            if (this.selectedAll.filter(e => e.value === element.value).length === 0) {
                this.remainingAvailable.push(element);
            }
        });
    }

    handleAvailableSearch(event) {
        let searchValue = event.detail.value;
        if (searchValue) {
            //Search for data in the Available options
            let newOptions = this.searchData(this.data, searchValue, false);

            //Add selected values in the options
            this.data.forEach((element) => {
                if (this.selected.filter(e => e === element.value).length === 1) {
                    newOptions.push(element);
                }
            });
            this.options = newOptions;
        } else {
            //Reset search result
            this.options = this.data;
        }
    }

    handleSelectedSearch(event) {
        let searchValue = event.detail.value;
        if (searchValue) {
            //Search for data in the Available options
            this.selected = this.searchData(this.selectedAll, searchValue, true);
            let newOptions = [];

            //Maintain selected values array with label and value
            this.data.forEach((element) => {
                if (this.selected.filter(e => e === element.value).length === 1) {
                    newOptions.push(element);
                }
            });
            //Add available values in the options
            this.remainingAvailable.forEach((element) => {
                newOptions.push(element);
            });
            this.options = newOptions;
        } else {
            //Reset the selected values
            let selectedValues = [];
            this.selectedAll.forEach((element) => {
                selectedValues.push(element.value);
            });
            this.selected = selectedValues;
            this.options = this.data;
        }
    }

    searchData(allData, searchValue, returnValue) {
        let filterData = [];
        allData.forEach((element) => {
            //Search data
            if (element.label.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1) {
                if (returnValue) {
                    filterData.push(element.value);
                } else {
                    filterData.push(element);
                }
            }
        });
        return filterData;
    }
}

multipicklistSearch.js-meta.xml

We have exposed the component to be used with home, record and app lightning page. You can change it based on your requirement.

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

Demo – Searchable Dual Picklist

searchable multi select picklist or searchable dual picklist

Thanks Ruchit Goswami for helping me in writing this informative blog. He is Senior Salesforce Developer at MTX Group.

Do you need help?

Are you stuck while working on this requirement? Do you want to get review of your solution? Now, you can book dedicated 1:1 with me on Lightning Web Component completely free.

GET IN TOUCH