Super fast records searching in the lightning component.

Lightning component client-side searching/filter.

Hello Everyone,

We generally make the server call to search the records in the table on the lighting component/VF page. As we know that the concept of Lightning Component development is based on reducing the server calls, so I have demonstrated client-side record filter/search in this lightning component. 

Component

 <aura:component controller="ListComponentCntrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >  
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>  
   <aura:attribute name="data" type="Contact[]" />  
   <aura:attribute name="UnfilteredData" type="Contact[]" />  
   <aura:attribute name="filter" type="String" />  
   <aura:handler name="change" value="{!v.filter}" action="{!c.doFilter}" />  
   <div class="slds-page-header">My Contacts</div>  
   <lightning:input name="x" value="{!v.filter}" label="Filter" placeholder="Search Contact by "/>  
   <table class="slds-table slds-table--bordered">  
     <thead>  
       <tr>  
         <th>Id</th>  
         <th>Name</th>  
         <th>Email</th>  
       </tr>  
     </thead>  
     <tbody>  
       <aura:iteration items="{!v.data}" var="row" indexVar="rowIndex">  
         <tr>  
           <td>{!row.Id}</td>  
           <td>{!row.Name}</td>  
           <td>{!row.Email}</td>  
         </tr>  
       </aura:iteration>  
     </tbody>  
   </table>   
 </aura:component>  

JS Controller

 ({  
   doInit :function(component,event,helper){  
     // Apex method definition  
     var action = component.get("c.loadData");  
     // callbak function  
     action.setCallback(this,function(response){  
       //get state  
       var state = response.getState();  
       // check if state is 'SUCCESS'  
       if(state == 'SUCCESS'){  
         var result = response.getReturnValue();  
         //set value to "UnfilteredData" attaribute   
         component.set("v.UnfilteredData",result);  
         console.log(result);  
         // set value to "data" attaribute  
         component.set("v.data",result);  
       }else{  
         console.log('something bad happend! ');  
       }  
     });  
     // put the action into queue for server call.  
     $A.enqueueAction(action);  
   },  
   doFilter: function(component, event, helper) {  
     //calling helper  
     helper.FilterRecords(component);  
   }  
 })  

JS Controller Helper

 ({  
   FilterRecords: function(component) {  
     //data showing in table  
     var data = component.get("v.data");  
     // all data featched from apex when component loaded  
     var allData = component.get("v.UnfilteredData");  
     //Search tems  
     var searchKey = component.get("v.filter");  
     // check is data is not undefined and its lenght is greater than 0  
     if(data!=undefined || data.length>0){  
       // filter method create a new array tha pass the test (provided as function)  
       var filtereddata = allData.filter(word => (!searchKey) || word.Name.toLowerCase().indexOf(searchKey.toLowerCase()) > -1);  
       console.log('** '+filtereddata);  
     }  
     // set new filtered array value to data showing in the table.  
     component.set("v.data", filtereddata);  
     // check if searchKey is blank  
     if(searchKey==''){  
       // set unfiltered data to data in the table.  
       component.set("v.data",component.get("v.UnfilteredData"));  
     }  
   }  
 })  

Apex Controller

 public class ListComponentCntrl {  
   @AuraEnabled  
   public static List<Contact> loadData(){  
     List<Contact> conList = [select Id,Name,Email from Contact order by Name asc];  
     return conList;  
   }  
 }  

Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
Hope this blog post helps many.

Happy Coding... :)