Can anyone Please help me to implement search bar for selecting Account records and displaying the records without button in aura component..
thanks in advance
Hii Rakesh Try Below Code
Please Mark It As Best Answer If It Helps<aura:component controller="AccRelatedConC"
implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<aura:attribute name="accList" type="List"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="activeSections" type="List" />
<aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>
<aura:attribute name="searchKeyword" type="String" description="use for store user search input"/>
<div class="slds-border_bottom">
<h1>Accounts</h1>
</div>
<div class="slds-scrollable_y">
<div class="slds-text-longform">
<lightning:input value="{!v.searchKeyword}"
placeholder="search Accounts.."
aura:id="searchField"
name="searchField"
label="Account Name"
onchange="{! c.onChange1 }" />
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr class="slds-text-title_caps">
<td>
<th scope="col">Persona</th>
</td></tr>
</thead>
<tbody>
<aura:iteration items="{!v.accList}" var="acc" indexVar="index">
<tr>
<td>
<div class="slds-truncate" title="">{!acc.Name}</div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</div>
</aura:component>
Helper:
({
SearchHelper : function(component, event, helper) {
var action = component.get('c.fetchAcc');
action.setParams({ searchKey : component.get("v.searchKeyword"),
});
action.setCallback(this, function(response){
var state = response.getState();
if(state === "SUCCESS"){
var allValues = response.getReturnValue();
console.log("allValues--->>> " + JSON.stringify(allValues));
//component.set('v.activeSections', allValues.Name);
component.set('v.accList', allValues);
}
else if(state === "ERROR") {
var errors = response.getError();
if(errors){
if(errors[0] && errors[0].message){
console.log("Error Message: " + errors[0].message);
}
}
else{
console.log("Unknown Error");
}
}
});
$A.enqueueAction(action);
}
});
Controller:
({
onChange1: function (component, evt, helper) {
var selectedLimit = component.find('searchField').get('v.value');
component.set('v.searchKeyword', selectedLimit);
helper.SearchHelper(component, event);
}
})
Apex:
public class AccRelatedConC {
@AuraEnabled(cacheable=true)
public static List<Account> fetchAcc (String searchKey){
String query= 'SELECT Id, Name FROM Account';
if ( searchKey != Null ) {
String key = '%' + searchKey + '%';
query += ' WHERE Name LIKE :key';
}system.debug(Database.query( query ));
return Database.query( query );
}
}
Thank You!