In the world of a UI designer or developer, a pretty common use case is to create an autocomplete dropdown based on user’s input.
Unfortunately, we do not have a base aura component to support this use case, hence I developed my own custom component, which will allow the user to search for records from Salesforce objects and create a dropdown populated with matching records.
What it can do?
The component can query records from any Salesforce object and can display matching records as a drop down. It accepts a few attributes which give you the power to control the component as per your use case.
label – String type attribute. Display a label over the component if a value is supplied.
objectApiName – String type attribute. Supply the API name of the object you want to query.
idFieldApiName – String type attribute. Supply the API name of Id field you want to fetch. Most of the times you want to standard Id field of the record, but in case, you want any other field to act as an Id field in the dropdown, you can simply provide the API name of the field.
valueFieldApiName – String type attribute. Supply the API name of the field you want to get value from. The values are displayed in the dropdown.
extendedWhereClause – String type attribute. The component can also take additional where clause for backend query. Use this attribute to supply additional conditions to your query. Example:
‘AND Amount > 1000’
maxRecords – Number type attribute. The maximum matching records you want to fetch and display as dropdown. Default is 10.
Invocation Examples
Below are some of the examples of how you can invoke the component:
1. Fetching Account Records with Name-
<c:AutoComplete aura:id=”account-records” label=”Account” objectApiName=”Account” idFieldApiName=”Id” valueFieldApiName=”Name” />
2. Fetching Opportunity Records with Name having Amount>1000 –
<c:AutoComplete aura:id=”opp-record” label=”Opportunity” objectApiName=”Opportunity” idFieldApiName=”Id” valueFieldApiName=”Name” extendedWhereClause=”AND Amount>1000″/>
3. Fetching record from custom object “Car__c”, here Id field is a custom field “Car_External_Id__c”, value field is standard “Name” field, max record fetched can be 20 –
<c:AutoComplete aura:id=”car-record” label=”Car” objectApiName=”Car__c” idFieldApiName=”Car_External_Id__c” valueFieldApiName=”Name” maxRecords=”10″/>
Usage Example
Download AutoComplete component code from my GitHub repo here:
https://github.com/choudharymanish8585/AutoComplete-Lightning-Component
Below is a sample component which usage AutoComplete component to fetch Account records.
Component:
https://gist.github.com/e52582bbd93028638177019eec7e3cfe
Client Controller:
https://gist.github.com/275cc8bff970e7fef96465a31d02392a
Output
Use AutoComplet component and see the magic like below:
raj
14 May 2019The repo doesn’t have the server side APEX controller (e.g. for component.get(“c.getRecords”);). May be useful to folks leaning to include this also in the repo.
Manish Choudhari
14 May 2019Oops, forgot to add those. Thanks for notifying me. I have added the files now.
dinesh
15 May 2019Great!!! Nice one
Ranjeeth
16 May 2019can you help to guide on how to become salesforce consultant? I don’t have a programming background. Are there any pathways?
sai prakash
17 Sep 2019hai, i am unable to find the apex controller
Manish Choudhari
4 Oct 2019This is the location of apex controller:
https://github.com/choudharymanish8585/AutoComplete-Lightning-Component/blob/master/AutoComplete/AutoCompleteController.cls
Varun
16 Dec 2019Do we have similar thing implemented using lightning web components?
David Rasmussen
19 Dec 2019This was a helpful example. Thank you!