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

My <li> tags have:

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

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

  • What you have tried so far?
    – vignesh
    Aug 21, 2018 at 9:33
  • I did such functionality in my old VF page, where I used jQuery text() on anchor tag and search() with regex. Then I'd add/remove class on the element and set display property based on class. if(j$(this).find("a").text().search(new RegExp(filter, "i")) < 0) { j$(this).removeClass("testing"); } else { j$(this).addClass("testing"); } j$(".accordion-content").each(function(){ if ( j$( this ).find("div").hasClass( "testing" ) ) { j$(this).css({ 'display': "block" });}else{ j$(this).css({ 'display': "none" }); }});
    – yeselkay
    Aug 21, 2018 at 9:50
  • I am learning Lightning and this is my first attempt to migrate the old VF page to Lightning. Learned that search() is not recommended. Any pointers here?
    – yeselkay
    Aug 21, 2018 at 9:53
  • were you able to try the below?
    – glls
    Aug 23, 2018 at 4:36
  • @glls with little modification, I was able to do this. Thanks a lot!
    – yeselkay
    Aug 24, 2018 at 5:11

1 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');
        helper.updateList(cmp, event, typedQuery); 

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>

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .