Super fast record search in the lightning component.

2021-07-06T15:48:15+05:30

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

2021-09-10T19:34:40+05:30

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

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

	({
	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);
	}
	})

	({
	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"));
	}
	}
	})

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

2 comments