Lookup component in Salesforce Lightning

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags , with 21 Comments on Lookup component in Salesforce Lightning

Salesforce Lightning component in plain JavaScript and SLDS with complete source code

Salesforce Lightning Lookup Component

Salesforce comes up with many out of box UI components and Lightning Base components. However, one important component missing is Lookup component or Type ahead component in Lightning. There are some lookup components available however either they are using some JavaScript library or UI doesn’t match with Salesforce Lightning Design system. So, I wanted to have something similar used by Salesforce Lightning interface itself and come up with this component. Complete source code of this component can be found on my Github repository also.

Before, jumping directly to source code, lets first discuss some important points.

Features of Lightning Lookup component

  • Build using Vanilla JavaScript and SLDS
  • Storable Action used to increase performance
  • Server call made only when space key pressed
  • On escape key press, search result gets cleared
  • Ability to set Icon
  • Parent component can read value of Lookup component without firing any event
  • Use of Unbound expression to make component faster

Reading Lightning Lookup component value from parent

There are multiple ways to read child lightning components value in parent component. We can either use events or component method (aura:method). However, for event, we need to create a new event (Lightning event file) and register it. For aura:method, it doesn’t return any value. I wanted something very simple and found that Pass by reference concept works for Lightning Components also. Its very simple, create aura:attribute in parent lightning component, pass it to child component. Whenever child component changes value, Parent component would be notified. This can be seen in below source code in LookupDemo.cmp file.

Below animation will give you some idea on how same lookup component page is used four times.

Salesforce Lightning Lookup Component Demo
Salesforce Lightning Lookup Component Demo

Below Apex class is used as a Lightning component controller.

Following source code is for Lightning Lookup component.

Below component depicts on how same Lookup component used four times for different objects in same parent. Below component can also be used as reference to see how communication between lightning component can be done using pass by reference mechanism.

Related posts

21 thoughts on “Lookup component in Salesforce Lightning”

  1. Great! I have been searching google for a few hours and all I found was some outdated things. Thanks for a great work, I slightly modified your version to use reference from a parent component because I query all the fields and need to replace the parent values.

  2. HI Jitendra,
    i am big fan for you. i have small doubt. is it possible Creating recurring time-based actions in workflow or process builder. i want fire the my workflow rule every day. is it possible or not?


    1. Thanks Venkat for your words. There are multiple ways to do it. One easiest way is to write an Apex Scheduler to change record on which WF rule is written. As Scheduler will update some hidden field, WF rule will fire with Scheduler.

      1. Thanks Jitendra for your quick reply. My requirement is completely different that is remove the scheduler classes and implement the same requirement using workflow rules and process builder.
        They want only workflows and process builder and no coding and scheduler classes

  3. Hi Jitendra
    Thanks for the wonderful explanation and code.
    How can I auto populate some fields(custom fields from the related object) from the lookup object on the input:text field on the component page when lookup is selected by user?
    Please suggest
    Thanks in advance

  4. Hi Jitendra,

    Please suggest me to achieve the List of Leads rendered based on search by name or email in lightning component.


  5. Works flawlessly. Question though: how can we embed this in an aura:iteration (list view) to allow a different assignment for each record? Currently when I select a value, it is assigning the same to ALL rows.

  6. Hi Jeetendra,

    The above code worked for me but my requirement is to make the lookup field mandatory on Ui.
    Since I am calling the sub component of lookup in my main component it doesn’t support required attribute.
    Is there any way to make the sub component required on my Ui?


  7. Hi Jitendra,

    Thanks a lot for this solution. It works beautifully. I do have a question though – There is a lookup field to the account object on my lightning component which is being populated on init. I am getting the Id of the account successfully but with the lookup component, that field is blank. How can I set it to display the correct account name on init?

  8. I haven’t been able to find license information for the code you share on your blog and gists. Can you clarify that, please? It seems from context like you are freely releasing this code into public domain with no restrictions, but I don’t want to use your work contrary to your intention.

  9. Hello Jitendra,

    I have the same questions like few of them below.

    1. Making this Lookup component “required” on need basis?
    2. Setting the value to the Lookup component on record edit?

    Thank you!
    Guest User

  10. Thanks for posting this! I’m trying to preview the LookupDemo in a simple Lightning app but I’m not getting the SLDS look and feel, do you have any suggestions on how to fix? See screenshot. The lightning app simply does

  11. Hello Jitendra, thanks for posting this. I’m trying to use onChange with your component so that I can force another component to refresh, but the selItem is coming up as null.

    Here’s a portion of my component. The “mfr” attribute is the selItem.

    Here’s the onchange handler. I need to refresh the SGI list based on the account ID. The mfr object always comes up as null, even when I specify v.mfr.val.

    refreshSGIList : function (component, event, helper) {
    console.log(“In refreshSGIList”);
    console.log(“mfr obj ” + component.get(“v.mfr”));
    var SGIList = component.find(“SGIList”);

    Any suggestions on what I could try?

    1. [I posted my code in JSFiddle at https://jsfiddle.net/dmcheng/hx8ofthb/%5D
      Hello Jitendra, thanks for posting this. I’m trying to use onChange with your component so that I can force another component to refresh, but the selItem is coming up as null.

      See JSFiddle for portions of the component and onchange handler.

      In the component, the “mfr” attribute is the selItem.

      The onchange handler should refresh the SGI list based on the account ID. However, the mfr object always comes up as null, even when I specify v.mfr.val.

      Any suggestions on what I could try?

Leave a Reply