Super fast records searching in the lightning component.

Lightning component client-side searching/filter.

0366f-bnner1

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>
view raw RecordList.cmp hosted with ❤ by GitHub

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);
}
})
view raw JS Controller hosted with ❤ by GitHub

JS Helper Controller.

({
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"));
}
}
})
view raw JS Helper Controller hosted with ❤ by GitHub

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;
}
}
view raw Apex Controller hosted with ❤ by GitHub

Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Hope this blog post helps many.

Happy Coding… 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s