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
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
Schedule a 1:1 Meeting with me
Also check out https://salesforcediaries.com/category/lightning-web-compont
