function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Brooks Johnson 6Brooks Johnson 6 

Client Side Search


Hi Friends, 

I am trying to implement some client-side search in a Lightning Component.  It is working when a search term is found. But when I clear out the seach input box the data does not revert to its original state. 

It looks like my original data attribute is overwritten when I  call component.set() with the search results. I have tried making a close of the original data aray with slice(). But that has not worked either. 
Could I get anyone to take a look at the code and tell what I need to do to change state when the search results array is empy.
Here is the component code. 
<div>
              <lightning:input class="searchBar" name="search-send-list" label="Search                         
                  Email Send List" type="search"
                    placeholder="Seach Send List" onchange="{!c.handleSearch}"/                 </div>


Here is the controller 
 
handleSearch : function (component, event, helper) {

        const currentSendList = component.get("v.data");
        let searchTerm = [];
        let searchResults = [];
        searchTerm = event.getSource().get("v.value").toLowerCase();

        if (searchTerm.length > 3){
            for (let i = 0; i < currentSendList.length; i++){
                console.log(currentSendList[i].Last_Name.toLowerCase().indexOf(searchTerm) != -1)
                if(currentSendList[i].Last_Name.toLowerCase().indexOf(searchTerm) != -1){
                    searchResults.push(currentSendList[i]);
                }
            }
        }
        console.log(searchResults.length);
        if (searchResults.length > 0){
            component.set("v.data", searchResults)
        }else {

        }
        console.log(currentSendList);
        console.log(searchTerm);
        console.log('current search results = ' + searchResults);
    }

 
Hemant_SoniHemant_Soni
Hi Brook,
According to me simplest way to do this create one more attribute same like data attribute called permanentData and set this as well when setting data attribute. Now you can use data as you are using and when search result array is empty then you can set data attribute with permanentData attribute.
  
<aura:attribute name="data" type="LIST"/>
<aura:attribute name="permanentdata" type="LIST"/>

if (searchResults.length > 0){
	component.set("v.data", searchResults);
}else {
	component.set("v.data", component.get('v.permanentdata'));
}
Thanks
Hemant