Super fast record search in the lightning component.

The post details a demonstration on reducing server calls in Lightning Component development by filtering/searching records at the client-side. It includes the components, JavaScript Controller and Helper Controller, as well as an Apex Controller, all of which aid in accomplishing this task. Expectedly, this post can assist many developers. Happy coding.

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.

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;
	}
	}