0

I have tried to create a search functionality for the lightning:dualListBox as below, Please omit the event and all,

We got a List of string to attribute 'dataImportFields' from the back end like, 'Id', 'Name', 'createdId'.....

<aura:component description="IM_Field_Header_Mapping_Form" implements="Modal_Hostable_Interface">
<!-- search term -->
<aura:attribute name="term" type="String" />
<!-- currently displayed items -->
<aura:attribute name="options" type="List" default="[]" />
<aura:attribute name="CSVHeaderAndDataImportFields" type="Map" description="" />
<aura:attribute name="dataImportFields" type="List" default="[]" description="List of Data Import Fields"/>
<aura:attribute name="selectedDataImportFields" type="List" default="[]" description="List of selected Data Import Fields"/>

<aura:attribute name="selectedIndex" type="Integer" description=""/>

<aura:handler name="init" value="{!this}" action="{!c.handleInit}"/>

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

<aura:registerEvent name="indexRecord" type="IM_File_Mapping_Row_Change_Event"/>

<aura:registerEvent name="close" type="Overlay_Modal_Event"/>

<lightning:input type="text" value="{!v.term}" label="Filter" />
<div>
    <lightning:dualListbox name="DataImportFields"
                           label= "Select Data Import Fields"
                           sourceLabel="Data Import Fields"
                           selectedLabel="Selected Data Import Fields"
                           options="{!v.options}"
                           value="{!v.selectedDataImportFields}"
                           />
</div>

Controller:

({
    handleInit : function(cmp, event, helper) {
        helper.handleInit(cmp);
    },

    search: function(cmp, event, helper) {
        // Filter list
        helper.search(cmp);
    }
})

Helper

({
    handleInit : function(cmp) {
        cmp.set('v.options', cmp.get('v.dataImportFields'));
        this.search(cmp);
    },

    search: function(cmp) {
    var term = cmp.get("v.term");
    cmp.set("v.options",
          cmp.get("v.dataImportFields")
          .filter(
              item => !term ||
              item.value.match(term) ||
              item.label.match(term)));
    }
})

But when I searched for example 'Id' then I could able to search it and select, But when I searched 'Name' again in the search box the selected Id from the selected picklist is vanished. Is there any way to keep the first selected value from the first search in the selected picklist?

1

I found a solution to overcome this issue, In the above filter search I'll need to add the selected dataImportFields to the source fields like below. It will keep the selected Import Data fields in the Selected box and we can search the term in the source list as follows,

Only need to change the Helper as below,

({
    handleInit : function(cmp, event) {
        cmp.set('v.options', cmp.get('v.dataImportFields'));
        this.search(cmp, event);
    },

    search: function(cmp, event) {
        var searchTerm = cmp.get("v.searchTerm");
        var selectedImport = cmp.get('v.selectedDataImportFields');
        var dataImportFields = cmp.get("v.dataImportFields")
                              .filter(
                                  item => !searchTerm ||
                                  item.value.match(searchTerm) ||
                                  item.label.match(searchTerm));

        for(var key of selectedImport) {
            var item = {
                "value":  key,
                "label": key
            };
            dataImportFields.push(item);
        }
        cmp.set('v.options', dataImportFields);
    }
})
0

Below is the complete helper code of duallistbox with search working sample.

({

handleInit: function(cmp, event)         
   {         
    this.ReloadFields(cmp);
    this.search(cmp, event);
},

search: function(cmp, event) {

    var searchTerm = cmp.get("v.term");
    var selectedImport = cmp.get('v.selectedDataImportFields');
    if(searchTerm==''){
        this.ReloadFields(cmp);
    }
    else{
    var dataImportFields = cmp.get("v.dataImportFields")
                          .filter(
                              item => !searchTerm ||
                              item.value.match(searchTerm) ||
                              item.label.match(searchTerm));

    for(var key of selectedImport) {
        var lbl=this.GetLabel(cmp,key);
        var item = {
            "value":  key,
            "label": lbl
        };
        if(!this.CheckDuplicate(dataImportFields,item)){
        dataImportFields.push(item);
        }
    }
    cmp.set('v.options', dataImportFields);
    }
},
GetLabel: function(cmp,key){
   var options= cmp.get('v.options');
    for(var keyoption of options){
        if(keyoption.value==key)
        {
            return keyoption.label;
        }

    }

},
ReloadFields: function(cmp){
  cmp.set('v.dataImportFields',  [
       { value: "Se", label: "Search" },
        { value: "F", label: "functionality" },
        { value: "L", label: "lightning" },
        { value: "D", label: "dualListbox" },
        { value: "Sa", label: "Salesforce" },
        { value: "St", label: "Stack" },
        { value: "H", label: "Hello" },
        { value: "W", label: "World" },
        { value: "T", label: "Test" }
    ]);
    cmp.set('v.options', cmp.get('v.dataImportFields'));  
},
CheckDuplicate: function(dataImportFields,item){
    var duplicate=false;
    for(var keyoption of dataImportFields)
    {
        if(keyoption.value==item.value)
        {
            duplicate=true;
            break;
        }
    }
    return duplicate;
}
})
  • 1
    Welcome to SFSE! Please take the tour and read How to Answer. While this may solve the problem at hand, you haven't described how or why it works. Code with no explanation is what we call a code dump. Code dumps tend to be lower quality answers, and attract a lot of comments like "that didn't work" and "try this instead" which make it harder for other people with similar problems to apply your solution themselves. Including a description gives people a fighting chance to make small adjustments if their situation is different or if you made a mistake yourself. – Derek F Dec 16 '18 at 13:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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