What is the Search Box In Aura Component? | The Developer Guide
A search box in an Aura component is a user interface element that allows users to input text and search for relevant information within the component or its associated data. In Aura, the search box can be implemented using the <lightning:input> component with the type="search" attribute. This component provides a text input field along with a search icon that can be used to initiate the search.
When a user types in the search box and clicks the search icon or presses enter, the component can execute a server-side controller action or a client-side JavaScript function to retrieve and display the search results. The search functionality can be customized to match the requirements of the component, such as searching based on specific fields or filters.
Overall, the search box is a common UI element used in many Aura components to allow users to quickly find the data they need.
Component:
<aura:component controller="searchAccountController" >
<aura:attribute name="keywordHolder" type="string" />
<aura:attribute name="accountList" type="list" />
<lightning:input name="AccountSearch" label="Enter Account Name" value="{!v.keywordHolder}"/>
<lightning:button label="Search Account" onclick="{!c.findAccount}" />
<aura:iteration var="acc" items="{!v.accountList}" >
{!acc.Name}
{!acc.type}
</aura:iteration>
</aura:component>
Don't forget to check out: Use Aura Component in Screen Flow | Salesforce Flow Builder Tutorial
Controller:
({
findAccount : function(component, event, helper) {
var action=component.get('c.fetchAccount');
action.setParams({
searchKeyWord : component.get("v.keywordHolder")
});
action.setCallback(this,function(response){
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;
}
}
Check out another amazing blog by Narendra Kumar here: How to Send Emails Using Lightning Web Component (LWC)?
Output:
Responses