Super fast record search in the lightning component.

Hello Everyone,

On the lighting component/VF page, we usually make a server call to search the records in the table. Because the concept of Lightning Component development is based on reducing server calls, I demonstrated here how we can filter/search records at the client-side 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.

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… 🙂


Arun Kumar

Arun Kumar is a Certified Salesforce developer and Salesforce Champions (Platform Champions), a Computer Science graduate, working on the Salesforce platform and providing customer solutions using as a Salesforce consultant/developer. He is the founder of SFDCLessons. :)

This Post Has 2 Comments

  1. Abhay

    can you please explain how the line no.12 of helper class is working

  2. arshad

    it throws error if a text has special characters and it is searched

Leave a Reply