Create a search bar key to search Account name using lightning component.

Introduction:

A Lightning Component is an UserInterface framework which is used for the development of dynamic web applications which can be used in mobile Phone and our desktops. For this purpose, JavaScript is used on the client-side, and Apex is used on the server-side. The Lightning Component framework is built on the open-source Aura framework. The Aura framework enables us to build apps that are not dependent on our data in Salesforce.

Follow the steps below to create a search bar key to search Account name using Salesforce Lightning Component:

Step 1: Create a Lightning Component

Firstly we have to create a Lightning Component and for that go to setup->Developer console, At Developer, console Click on New to create a lightning component and use the code mentioned below:

<aura:component controller="AccountsController">
    <aura:attribute name="accounts" type="List" />
    <aura:attribute name="key" type="String" /> 
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />        
    <lightning:input type="text" name="searchKey" label="Enter" aura:id="searchKey" onchange="{!c.searchKeyChange}" placeholder="Search" />          
    <table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
        <thead>
            <tr class="slds-text-heading_label">              
                <th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
                <th scope="col"><div class="slds-truncate" title="Type">Type</div></th>         
                <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>            
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.accounts}" var="account">
                <tr>  
                    <td><div class="slds-truncate" title="{!account.Name}">{!account.Name}</div></td>
                    <td><div class="slds-truncate" title="{!account.Type}">{!account.Type}</div></td>                   
                    <td><div class="slds-truncate" title="{!account.Phone}">{!account.Phone}</div></td>                    
                </tr>
            </aura:iteration>
        </tbody>
    </table>
</aura:component>

Step 2: Create a Lightning Controller for the Component

Now, we have created a component, firstly we have to handle the logic at the lightning level then we can move to apex side, for that we have to create a component controller by clicking on the controller in the panel in the right side and use the code mentioned below:

({
    doInit: function(component, event, helper) {
        helper.getAccountList(component);
    },
    searchKeyChange: function(component, event) {
        var searchKey = component.find("searchKey").get("v.value");
        console.log('searchKey:::::'+searchKey);
        var action = component.get("c.findByName");
        action.setParams({
            "searchKey": searchKey
        });
        action.setCallback(this, function(a) {
            component.set("v.accounts", a.getReturnValue());
        });
        $A.enqueueAction(action);
    }   
})

Step 3: Create a Helper Class

Now create a helper class and call it in your controller. For that we need to click on the panel on the right side and use the code mentioned below:

({      
    getAccountList: function(component) {
        var action = component.get('c.getAccounts');
        var self = this;
        action.setCallback(this, function(actionResult) {
            component.set('v.accounts', actionResult.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})

Step 4: Create an Apex class and define the method to create the record

Now the component which we have created will call Lightning Controller and then the controller will invoke Method that is written in Apex Class for that use the code mentioned below:

public class AccountsController {
    @AuraEnabled
    public static List <Account> getAccounts() {
        return [SELECT Id, name, Type, Phone FROM Account ORDER BY createdDate ASC];
    }    
    @AuraEnabled
    public static List<Account> findByName(String searchKey) {
        String name =  + searchKey + '%';
        return [SELECT id, name, phone,type FROM Account WHERE name LIKE :name];
    }
}

Step 5: Create a Salesforce Lightning Application which will host the component in the App

Lightning App has to created for the hosting purpose. For that Go to Developer Console->New Lightning Application and use the code mentioned below:

<aura:application extends="force:slds">
    <c:AccountList/>
</aura:application>

Step 6: Test the Application

We have successfully created the application and it’s time to test it. Save and Click on Update Preview to view your created Application. Your page will look something like this.