A search field in an Aura part is a person interface factor that permits customers to enter textual content and seek for related info throughout the part or its related information. In Aura, the search field could be applied utilizing the <lightning:enter> part with the sort=”search” attribute. This part gives a textual content enter subject together with a search icon that can be utilized to provoke the search.
When a person varieties within the search field and clicks the search icon or presses enter, the part can execute a server-side controller motion or a client-side JavaScript operate to retrieve and show the search outcomes. The search performance could be personalized to match the necessities of the part, reminiscent of looking based mostly on particular fields or filters.
General, the search field is a typical UI factor utilized in many Aura parts to permit customers to shortly discover the info they want.
Element:
<aura:part controller="searchAccountController" >
<aura:attribute identify="keywordHolder" sort="string" />
<aura:attribute identify="accountList" sort="record" />
<lightning:enter identify="AccountSearch" label="Enter Account Identify" worth="{!v.keywordHolder}"/>
<lightning:button label="Search Account" onclick="{!c.findAccount}" />
<aura:iteration var="acc" objects="{!v.accountList}" >
{!acc.Identify}
{!acc.sort}
</aura:iteration>
</aura:part>
Do not forget to take a look at: Use Aura Component in Screen Flow | Salesforce Flow Builder Tutorial
Controller:
({
findAccount : operate(part, occasion, helper) {
var motion=part.get('c.fetchAccount');
motion.setParams({
searchKeyWord : part.get("v.keywordHolder")
});
motion.setCallback(this,operate(response){
var state=response.getState();
var response1=response.getReturnValue();
if(state==="SUCCESS")
{
part.set("v.accountList",response1);
}
});
$A.enqueueAction(motion);
}
})
Apex Controller:
public class searchAccountController {
@AuraEnabled
public static Record < account > fetchAccount(String searchKeyWord) {
String searchKey = searchKeyWord + '%';
Record < Account > returnList = new Record < Account > ();
Record < 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;
}
}
Try one other superb weblog by Narendra Kumar right here: How to Send Emails Using Lightning Web Component (LWC)?
Output:
