1

I have a lightning component which lists a list of reports. Also a search Bar so users can search from the list. I am not using Apex to perform the Search using .filter within the js controller. But the issue is when I first search for 'Active User' for eg, it shows me all the results which have active users in its name but when I remove the filter and enter a new search, it still searches from the reduced list and not from the entire list and thats why not able to see any values for new search. It works when I refresh the page and a new search parameter. The list of reports is being pulled from an Apex controller. onchange fires when I change the parameter but snce the list is already filtered, it just performs additional filter on the filtered list. Search.cmp

   <aura:attribute name="searchText" type="String"/>
<!-- Real time filtering based on changes to the filter text -->
    <aura:handler name="change" value="{!v.searchText}" action="{!c.updateFilter}" />
 <!--Search for reports-->
<!-- Filter input -->
    <lightning:input name="x" value="{!v.searchText}" label="Search" onchange="{!c.updateFilter}" />
<aura:iteration items="{!v.leftCol}" var="tableRow">
                    <div id="{!tableRow.Id}" class="dnd-table-row" draggable="true" ondragstart="{!c.handleDrag}">

                        <lightning:layoutItem  padding="around-small" size="12" largeDeviceSize="6" flexibility="grow">
                            <lightning:card>
                                {!tableRow.Name}
                            </lightning:card>
                        </lightning:layoutItem>  

                    </div>
                </aura:iteration> 

SearchController

    // Apply filter to the list of all items
    updateFilter: function(component) {
        var data = component.get("v.leftCol"),
            term = component.get("v.searchText"),
            newdata = data.filter(item => (!term) || item.Name.toLowerCase().indexOf(term.toLowerCase()) > -1);
            /*newdata = data.filter(function(item) {
                console.log(item.Name);
                return (!term) || item.Name.toLowerCase().indexOf(term.toLowerCase()) > -1; 
            });
            */

        component.set("v.leftCol", newdata);
        console.log('Left column after search'+newdata);
    }
})
  • What have you tried to make it work? its not clear what it is you have tried and where you are stuck since your last post (other than use code from sfdxfox's repo). how are you updating/changing the lsit of iterable items that should be displayed? have you debugged your code? if yes, what part is not behaving as expected. Please edit your post with additional details. Thanks – glls Feb 5 at 14:55
  • I have edited my post. I have debugged my code but am trying to figure out how to refresh the list to the original list when I change the search parameter. – P.Shri Feb 5 at 15:03
0

Your search needs to filter the complete list of data you have, not the list of data you're currently displaying. Your display data set is being stored in the attribute v.leftCol, but you also start your search from that data:

    var data = component.get("v.leftCol"),
    newdata = data.filter( [...] );

and then populate the new results back into that attribute:

    component.set("v.leftCol", newdata);

As a result, each search operation starts with the current visible data set - i.e., the results of the last search, if one has already been performed.

Your component needs to store the complete, original data set in a separate attribute that's not altered by the search operation - say v.completeData. Each search should start with

    var data = component.get("v.completeData"),

and then place its results in v.leftCol.

  • Thanks @David Reed as always. Great point. – P.Shri Feb 5 at 15:54

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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