Filter by Label of HTML elements in lightning client side controller

Question

I have anchor tags inside <li> and trying to filter them based on user input in text box.

My <li> tags have:
Apple
Pineapple
Appexchange
Salesforce

If someone types app in the text box, the list should display
Apple
Pineapple
Appexchange

May I know how I can do this with lightning client controller?

Answer 1

Basically, you can achieve the fucntionality with the following elements:

• Your Input Element
• A collection type attribute
• Method that receives the value
• Method that searches and updates the displayable elements (I split my method, controller and helper)

In the following example, I have a lightning:input component that uses an onchange event handler, as well as a value attribute:

<lightning:input aura:id="query-box" type="search" name="search" placeholder="additional filtering" onchange="{!c.queryElements}" value="{!v.searchInut}"/>

In my controller, I have a method that gets the value in my input elements everytime it changes:

queryElements  : function(cmp, event, helper) {

    const typedQuery = event.getSource().get('v.value');            
    const suggArray = cmp.get('v.querySuggestions');
    try{
        helper.updateList(cmp, event, typedQuery); 
    }
    catch(e){
        console.log(e.message);
    }
},

and finally, in your helper, add the logic for updating whatever collection type you decide to use:

updateList : function(cmp, event, inp){
    let activeSuggestionArray = [];
    /*
        Logic for evaluating what the input should return
    */
    //Finally, update your collection tpye attribute
cmp.set('v.activeList', activeSuggestionArray);

}     

Example component.cmp:

<aura:attribute name="activeList" type="List" default="[]"/>

<lightning:input aura:id="query-box" type="search" name="search" placeholder="additional filtering" onchange="{!c.queryElements}" value="{!v.searchInut}"/>

        <ul aura:id="dynamic-ul" >
            <aura:iteration items="{!v.activeList}" var="dynLi">
                <li aura:id="dynamic-item" >{!dynLi}</li>
            </aura:iteration>
        </ul>

when you update your collection type, the aura:iteration will re-evaluate and re-render the displayable elements.