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?
2
-
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– dzhCommented Mar 5, 2018 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 ♦Commented Mar 5, 2018 at 6:42
Add a comment
|
1 Answer
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)));
}
})
-
-
@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? Commented Sep 27, 2018 at 9:15
-
@Hariprasath This code was not written to support that logic, but you could modify it so it does so.– sfdcfox ♦Commented Sep 27, 2018 at 14:27
-
1I have tried but couldn't able to find a way to do it. Could you please help me on this? Commented Sep 27, 2018 at 15:14