Implementation of Dynamic Search in Salesforce Lightning Component
Today, I am sharing the code, that, how you can implement Dynamic Search using Lightning Component. For this task, we need three things:-
- A Lightning Component Bundle
- A Lightning Application Bundle
- An Apex Controller.
Apex Controller -
public class AccountShowController { @AuraEnabled public static List showAccounts(){ return [SELECT Id, Name, Phone, AnnualRevenue From Account]; } }
Lightning Component -
<aura:component controller="AccountShowController"> <aura:attribute name="Account" type="Account[]" /> <aura:attribute name="SearchKey" type="String" /> <aura:handler name="init" value="{!this}" action="{!c.myAction}"/> <div class="slds-form-element"> <label class="slds-form-element__label" for="text-input-id-1">Input Label</label> <div class="slds-form-element__control"> <input type="text" value="{!v.SearchKey}" onkeyup="{!c.myFunction}" id="myInput" class="slds-input" placeholder="Search Accounts" /> </div> </div> <br/> <table class="slds-table slds-table--bordered" id="myTable"> <thead> <tr> <th>Name</th> <th>Phone</th> <th>AnnualRevenue</th> </tr> </thead> <tbody> <aura:iteration items="{!v.Account}" var="a"> <tr> <td>{!a.Name}</td> <td>{!a.Phone}</td> <td>{!a.AnnualRevenue}</td> </tr> </aura:iteration> </tbody> </table> </aura:component>
JavaScript Controller -
({ myAction : function(component, event, helper) { var action = component.get("c.showAccounts"); action.setCallback(this, function(response) { var state=response.getState(); if(state === 'SUCCESS') { component.set("v.Account", response.getReturnValue()); } else { alert("error"); } }); $A.enqueueAction(action); }, myFunction:function(component, event, helper) { var input, filter, table, tr, td, i; input = document.getElementById("myInput"); //input = component.get("v.SearchKey"); //var input = component.find("myInput").get("v.value"); console.log(input.value); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); //console.log(tr.length) for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } })
Lightning Application -
<aura:application extends="force:slds"> <c:auraiterationtable></c:auraiterationtable> </aura:application>
Thanks.