Lookup Lite component in salesforce lightning

Suyash N
Suyash N 2.2k Views 6 comments

Hey CafeForce Users,

Have you ever tried custom lookup component fetching thousands of records from apex? If so, you are well aware of the speed it offers. Custom lookup components having aura:iteration is extremely slow to display records. It will take more than 20sec to fetch and display over 5000 records.

To resolve the speed issues we gonna create a fast lookup component lookup lite. In this we not use aura:iteration instead we will access HTML DOM and append HTML tags dynamically.

Lookup Lite component Features:

  • Single component
  • Lightning fast speed
  • Will work on any object
  • Ability to set sObject Icon
  • Storable Action
  • Ability to set placeholder & label


lookup component lightning demo


Step-1: Create an Apex controller

Here our main focus is on faster lookup component so I m creating a simple Apex controller without any (Field Level Security) FLS or Error checks. Create LookupLiteController.cls Apex class and paste the below code.

Step-2: Now we will create the LookupLite lightning component.

For creating a new lightning component navigate to Developer Console > File > New > Lightning Component

Enter Name & Description and click Submit. Now component markup file will open by default. In the right sidebar, click on Controller, Helper, and Style to create these files too.


Now open LookupLite.cmp and paste the below code.

Open the controller file LookupLiteController.js and paste the below code

Our helper will enqueue an action and will fetch the data from the server so open the helper file LookupLiteHelper.js and paste the below code.

Finally, paste the CSS in LookupLite.css file.

Step-3: Call the component in lightning App

Finally, Our component is now ready to use. Just call the component and pass the necessary values.

To use a fancy lookup, see the Custom Lookup component using aura:iteration.

Share This Article
Notify of
Inline Feedbacks
View all comments

Does this work, when i use this multiple times on the same component.

let’s say, i have 5 rows in table, i will be creating Contact, and when i choose account, it should allow me to select different account each contact that i am going to create.


it doesnt showing the result ?



Thank you for sharing this component. I wanted to use this on a contact lookup field, however it seems that we cannot use the like operator with the “FirsName” or “LastName” field due to encryption: “The operator like is not supported on an encrypted field”.
Any ideia on how I can solve this?