4

I have implemented the lightning:dualListbox in my component. Now I want to implement the search functionality which searches only in the lightning:dualListbox. Is it possible to implement this? If yes how can I achieve this?

  • Unfortunately you cannot extend or modify built-in components. What you could potentially do is use something like Strike Multi Select Picklist or your homemade search to restrict the items available in the collection used by dualListbox. lightningstrike.io/#!/strikeMultiSelectPicklist – dzh Mar 5 '18 at 6:36
  • Note: I guessed at your intent, then second-guessed myself. If my answer helps you, great. If not, you will definitely need to edit your question to be more clear as to what you're trying to do. – sfdcfox Mar 5 '18 at 6:42
10

Yes, it's possible. Here's a demonstration app:


<aura:application extends="force:slds">
    <!-- search term -->
    <aura:attribute name="term" type="String" />
    <!-- currently displayed items -->
    <aura:attribute name="options" type="List" default="[]" />
    <!-- all items -->
    <aura:attribute name="allOptions" type="List" default="[]" />
    <!-- selected values -->
    <aura:attribute name="selected" type="List" default="[]" />

    <!-- load data from somewhere -->
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <!-- update list when term changes -->
    <aura:handler name="change" value="{!v.term}" action="{!c.search}" />

    <lightning:input type="text" value="{!v.term}" label="Filter" />
    <lightning:dualListbox value="{!v.selected}" options="{!v.options}" label="Items"
                           sourceLabel="Available" selectedLabel="Selected" />
</aura:application>

({
    init: function(component, event, helper) {
        // Load data
        helper.init(component);
    },
    search: function(component, event, helper) {
        // Filter list
        helper.search(component);
    }
})

({
    init: function(component) {
        // Load some default values.
        component.set("v.allOptions", [
            { value: "Hello", label: "Hello" },
            { value: "World", label: "World" },
            { value: "Test", label: "Test" }
        ]);
        // Initialize the options list
        this.search(component);
    },
    search: function(component) {
        // Search term
        var term = component.get("v.term");
        // Show all when no filter, or when filter matches label or value
        component.set("v.options",
                      component.get("v.allOptions")
                      .filter(
                          item => !term || 
                          item.value.match(term) || 
                          item.label.match(term)));
    }
})
| improve this answer | |
  • Very Neat @sfdcfox – RedDevil Mar 5 '18 at 11:22
  • @sfdcfox.. I have tried your solution but when I searched 2nd time in the searchbox the values that are selected in the 1st time is vanished from the selected box. Is it the behavior or I missed anything? – Hariprasath Sep 27 '18 at 9:15
  • @Hariprasath This code was not written to support that logic, but you could modify it so it does so. – sfdcfox Sep 27 '18 at 14:27
  • I have tried but couldn't able to find a way to do it. Could you please help me on this? – Hariprasath Sep 27 '18 at 15:14

Not the answer you're looking for? Browse other questions tagged or ask your own question.