custom Lookup

How to create custom Lookup in lightning component

Lightning Component

Sharing is caring!

This Post Is Outdated Due To Some Salesforce New Release update, Please refer below post for reusable custom lightning component

Create Re-Usable Custom Lookup In Salesforce Lightning Component Version 2 : Dynamic

Prerequisites : basic understanding of Lightning Component.

custom Lookup


custom Lookup resources


Step 0 : Create Support SVG Lightning component.

In the first step, we are create a small lightning component, for rendered the SVG icons in our Lookup component.

you can also use this svg component in any of your lightning component for display the SVG icons

  • create a new lightning component bundle with Name svg
lightning component [svg.cmp]

next click on the RENDERER tab on lightning component bundle and past below code:

renderer tab

RENDERER.js  [svgRenderer.js]

Yoo… our SVG component is ready for Use… 🙂

now we can display SVG icons from our Design System Zip file (static resources) By using.

Lightning Icon Reference :

Step 1 : Create Apex Class Controller.
Apex class [lookUpController.apxc]

  • In above Apex class we have only one @AuraEnabled Method.
  • In this method we have one String ‘searchKeyWord’ parameter.
  • By this parameter we are find Account record  List and Return the list.
 Step 2 : Create Lightning Event
  • Next we create a Lightning Event bundle for communicate data(attribute values) between different components.
  • Events are contain attributes that can be set before the event is fired and read when the event is handled by component.
lightning Event [selectedAccountEvent.evt]

  •  In above Event we have only single attribute which type is Account type.
  • by this attribute, we are passing the selected account record to parent component [ customLookup ]  by child component[customLookupResult ].

custom Lookup blueprint

Step 3 : Create Child Component For Display the Search Result List
Lightning Component [customLookupResult.cmp]

JS Controller [customLookupResultController.js]

NOTE: Change $Resource.SLDS24 with your SLDS file Name (static resource zip file Name).
Step 4 : Create Lightning Custom Lookup Component
  • Create a lightning component bundle with Name customLookup
lightning component [customLookup.cmp]

JS Controller [customLookupController.js]

JS Helper [customLookupHelper.js]

Output :

custom Lookup
Related Resources :

Salesforce Lightning Design System Lookup

Lightning Component Events


Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box. ?

Sharing is caring!

(Visited 13,709 times, 11 visits today)


  • Hi –
    I’m getting the following exception: System.FinalException: Cannot modify a collection while it is being iterated.

    Can you help me in adressing this issue.

    Thanks in advance.

    Best Regards

    • HI @Rajesh
      did you get this error with above apex class (Apex class [lookUpController.apxc]), which use in this sample lookup code , ?
      and Basically This type exception is occurred when you are trying to modify some record while you are iterating same record.

      you can post you issue on
      in i look into this.

      • Hi-
        Thanks for the quick reply. It was able to figure this out. I modified your code and did that above mistake. I has another issue regarding the performance so i posted in the forum.

        Thanks in advance.

  • I have created a custom lookup component on account object in my results I want to specify the record type. based upon record type only I need display the results in search field. Please tell me how can I.


    Thanks & Best Regards,


    • Hi Rajesh, you can add a where condition in your component apex controller query such as “WHERE RecordType.Name = ‘yourSpecificRecordTypeName'”

  • Hello. Much thanks for this article. But I have a remark: in summer 17 they removed ‘display:flex;’ from selector “.slds-lookup[data-select=single] .slds-pill, .slds-lookup[data-select=multi] .slds-pill {“, so now when record is selected, it does not stretch to fit parent container. Can you make proper adjustments please?

    • hi Vladyslav Kushney,
      Thanks for your feedback, and i don’t have Summer 17 ready org [sandbox] right now for testing it. so i will update soon when i have access in summer 17 ready org.
      and can you please mention the official doc. on this new update

  • Is n’t it possible in other ways without creating components for lookup field? Can’t we use Force input field and what other ways to get lookup field ?

    • HI SF User ,
      Thanks for your valuable feedback :).
      you can get selected value in client side(javaScript) controller by :

      component.get(“v.selectedRecord”) // for selected account object
      component.get(“v.selectedRecord”).Name // for selected account Name
      component.get(“v.selectedRecord”).Id // for selected account Id
      Hopes it helps you 🙂

  • Thank you for the quick reply, but I was not specific enough.

    I wanted to know, how can we get the selected record (Account) into the APEX controller?


    Thank you

    • ok, so first create a simple button in your lightning component

      button onclick=”{!c.onSave}”> save button

      now create onSave javaScript controller function
      onSave : function (component, event, helper) {
      // call the apex class method
      var action = component.get(“c.saveAccount”);
      // set param to method
      ‘obj’: component.get(“v.selectedRecord”)
      // set a callBack
      action.setCallback(this, function(response) {
      var state = response.getState();
      if (state === “SUCCESS”) {
      // enqueue the Action

      add method in apex class
      public static void saveAccount(Account obj){
      system.debug(‘selectedAccount–>’ + obj);

      Hops it helps you

  • First of all this is a great component, thanks for sharing it.

    I would like to use this with another component like this :

    Parent Component

    >>>>>Lookup Component

    Is there a way to set the default value as a parameter so when the component is rendered he already has a value on it? (Like a account select or so)


  • Hi,

    Thanks for such a wonderful article!

    I have one question, when i select an account from the list then it doesn’t get in to the search box, can you please help on this.


  • Hi! excellent article! I wonder how I can reset the selection, I want to clear the form after submission if success but I cant find a way to clear the selection, I tried setting selectedRecord to null and selection is cleared, but I see the empty square with the X.

  • Thank you for the Article.It really helped me.
    One problem that i faced while using your article was that search and cancel symbols not showing in IE 11 where as its showing correctly in Chrome Version 59.0.3071.115.Please help me on this

    Thank you

  • While trying to fetch the selectedAccount parameter from the event, the function is returning undefined, hence although search is being done, while trying to save it the name of the selectedRecord does not appear. Am i missing something here? I saw that the event is registered

  • HI sfdcMonkey,

    I am using lookup field . and want to show error if that field is blank . I am using another component to show the lookup field value. I am show error another fields but not successs to show blank error on the lookup field . pls guide how to show error on lookup field.




  • Hi SFDC Monkey,

    Excellent article..,if i want to display header Name in the look up display list, can you help me in achieving this?.



  • Great article!

    I was just wondering if  we can add multiple accounts through the search and display the selection as lightning pills? I see its working for only one selection.

Leave a Reply