Lightning Component search box

Here we will build a simple account search lightning component based on the topics we have completed before this.

Component:

<aura:component controller="searchAccountController" >

    <aura:attribute name="keywordHolder" type="string" /> // Declaring attribute to hold value

    <aura:attribute name="accountList" type="list" /> // Declaring attribute to hold account list

    <lightning:input name="AccountSearch"  label="Enter Account Name" value="{!v.keywordHolder}"/>  // Linking user input with attribute through value parameter.

    <lightning:button label="Search Account" onclick="{!c.findAccount}" />

    <aura:iteration var="acc" items="{!v.accountList}" >   // Displaying list of account

    {!acc.Name}

    {!acc.type}

    </aura:iteration> 

</aura:component>

Controller:

({

 findAccount : function(component, event, helper) { 

        var action=component.get('c.fetchAccount');

        action.setParams({

            searchKeyWord : component.get("v.keywordHolder")         

        });   // setParams is optional, since we are expecting parameter in apex controller method we are passing the user entered value in the apex controller method.

        

        action.setCallback(this,function(response){          // Getting the response back

            var state=response.getState();

            var response1=response.getReturnValue();

            if(state==="SUCCESS")

            {

                component.set("v.accountList",response1);

            }         

        });

        $A.enqueueAction(action);

 }

})

Apex Controller:

public class searchAccountController {

@AuraEnabled

 public static List < account > fetchAccount(String searchKeyWord) {

  String searchKey = searchKeyWord + '%';

  List < Account > returnList = new List < Account > ();

  List < Account > lstOfAccount = [select id, Name, Type, Industry, Phone, Fax from account where Name LIKE: searchKey limit 1];

  for (Account acc: lstOfAccount) {

   returnList.add(acc);

  }

  return returnList;

 }

}

Application:

<aura:application extends="force:slds" >

 <c:SimpleAccountSearch></c:SimpleAccountSearch>

</aura:application>

Output: