Lightning Autocomplete Drop Down Component

Write Me

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:

Check out more

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Salesforce.com Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.