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.


<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">
<aura:iteration items="{!}" var="row" indexVar="rowIndex">
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
//get state
var state = response.getState();
// check if state is 'SUCCESS'
if(state == 'SUCCESS'){
var result = response.getReturnValue();
//set value to "UnfilteredData" attaribute
// set value to "data" attaribute
console.log('something bad happend! ');
// put the action into queue for server call.
doFilter: function(component, event, helper) {
//calling helper
view raw JS Controller hosted with ❤ by GitHub

JS Helper Controller.

FilterRecords: function(component) {
//data showing in table
var data = component.get("");
// 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("", filtereddata);
// check if searchKey is blank
// set unfiltered data to data in the table.
view raw JS Helper Controller hosted with ❤ by GitHub

Apex Controller.

public class ListComponentCntrl {
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


Hope this blog post helps many.

Happy Coding… 🙂

Leave a Reply

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

You are commenting using your 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