How to create custom Lookup in lightning component

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

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

Prerequisites : basic understanding of Lightning Component.

 

 

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]

<aura:component >
    <aura:attribute name="class" type="String" description="CSS classname for the SVG element" />
    <aura:attribute name="xlinkHref" type="String" description="SLDS icon path. Ex: /assets/icons/utility-sprite/svg/symbols.svg#download" />
    <aura:attribute name="aria-hidden" type="String" default="true" description="aria-hidden true or false. defaults to true" />
</aura:component>

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

RENDERER.js  [svgRenderer.js]

({
	render: function(component, helper) {
		//grab attributes from the component markup
		var classname = component.get("v.class");
		var xlinkhref = component.get("v.xlinkHref");
		var ariaHidden = component.get("v.aria-hidden");
 
		//return an svg element w/ the attributes
		var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
		svg.setAttribute('class', classname);
		svg.setAttribute('aria-hidden', ariaHidden);
		svg.innerHTML = '<use xlink:href="'+xlinkhref+'"></use>';
		return svg;
	}
})

Yoo… our SVG component is ready for Use… 🙂

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

<c:svg class="slds-input__icon slds-show" xlinkHref="{!$Resource.SLDS24 + '/assets/icons/utility-sprite/svg/symbols.svg#search'}" />
<!-- here c: is org. namespace prefix-->

Lightning Icon Reference :https://www.lightningdesignsystem.com/icons/

Step 1 : Create Apex Class Controller.

Apex class [lookUpController.apxc]

public class lookUpController {
   @AuraEnabled
 public static List < account > fetchAccount(String searchKeyWord) {
  String searchKey = searchKeyWord + '%';
  List < Account > returnList = new List < Account > ();
  List < Account > lstOfAccount = [select id, Name from account where Name LIKE: searchKey];
 
  for (Account acc: lstOfAccount) {
     returnList.add(acc);
     }
  return returnList;
 }
}

• 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]

<aura:event type="COMPONENT" description="by this event we are pass the selected account in the parent component">
    <aura:attribute name="accountByEvent" type="account"/>
</aura:event>

•  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 ].

COMPONENT BLUEPRINT :

Step 3 : Create Child Component For Display the Search Result List

Lightning Component [customLookupResult.cmp]

<aura:component >
    <aura:attribute name="oAccount" type="Account" />
  <!--Register the component level event-->
    <aura:registerEvent name="oSelectedAccountEvent" type="c:selectedAccountEvent"/>
    
    <li role="presentation">
        <span class="slds-lookup__item-action slds-media slds-media--center" id="lookup-option-350" role="option">
         <div class="slds-media__body">
          <div class="slds-input-has-icon slds-input-has-icon--right">
            <c:svg class="slds-input__icon" xlinkHref="{!$Resource.SLDS24 + '/assets/icons/standard-sprite/svg/symbols.svg#account'}" />                   
            <div class="slds-lookup__result-text"><a onclick="{!c.selectAccount}">{!v.oAccount.Name}</a></div>
          </div>
        </div>    
        </span>
    </li>
</aura:component>

JS Controller [customLookupResultController.js]

({
	 selectAccount : function(component, event, helper){      
    // get the selected Account from list  
      var getSelectAccount = component.get("v.oAccount");
    // call the event   
      var compEvent = component.getEvent("oSelectedAccountEvent");
    // set the Selected Account to the event attribute.  
         compEvent.setParams({"accountByEvent" : getSelectAccount });  
    // fire the event  
         compEvent.fire();
    },
})

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]

<aura:component controller="lookUpController" >
   <!---Use Salesforce Lightning Design System CSS From Static resources-->   
   <ltng:require styles="{!$Resource.SLDS24 + '/assets/styles/salesforce-lightning-design-system.css'}"/>
   
    <!--declare attributes--> 
   <aura:attribute name="selectedRecord" type="Account" default="{}" description="Use,for store SELECTED sObject Record"/>
   <aura:attribute name="listOfSearchRecords" type="Account[]" description="Use,for store the list of search records which returns from apex class"/>
   <aura:attribute name="SearchKeyWord" type="string"/>
   <aura:attribute name="Message" type="String" default="Search Result.."/>
    
   <!--declare events hendlers-->  
   <aura:handler name="oSelectedAccountEvent" event="c:selectedAccountEvent" action="{!c.handleComponentEvent}"/>
   <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
   <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
 
   <!-- https://www.lightningdesignsystem.com/components/lookups/ --> 
   <div class="slds-m-around--large">
      <div aura:id="searchRes" class="slds-form-element slds-lookup slds-is-close" data-select="single">
         <label class="slds-form-element__label" for="lookup-348"> Account Name </label>
         <!--This part is for display search bar for lookup-->  
         <div class="slds-form-element__control">
            <div class="slds-input-has-icon slds-input-has-icon--right">
               <c:svg class="slds-input__icon slds-show" xlinkHref="{!$Resource.SLDS24 + '/assets/icons/utility-sprite/svg/symbols.svg#search'}" />
               <!-- This markup is for when an record is selected -->
               <div aura:id="lookup-pill" class="slds-pill-container slds-hide">
                  <span class="slds-pill">
                     <span class="slds-pill__label">
                       {!v.selectedRecord.Name}  
                     </span>
                     <button class="slds-button slds-button--icon slds-pill__remove" onclick="{!c.clear}">
                        <c:svg class="slds-button__icon" xlinkHref="{!$Resource.SLDS24 + '/assets/icons/utility-sprite/svg/symbols.svg#close'}" />
                        <span class="slds-assistive-text">Remove</span>
                     </button>
                  </span>
               </div>
              <div aura:id="lookupField" class="slds-show">
               <ui:inputText  updateOn="keyup" keyup="{!c.keyPressController}" class="slds-lookup__search-input slds-input " value="{!v.SearchKeyWord}" placeholder="search.."/>
              </div>   
            </div>
         </div>
         <!--This part is for Display typehead lookup result List-->  
         <div class="slds-lookup__menu slds" id="lookup-348">
            <div class="slds-lookup__item--label slds-text-body--small">{!v.Message}</div>
            <center> <ui:spinner aura:id="spinner"/> </center>
            <ul class="slds-lookup__list" role="listbox">
               <aura:iteration items="{!v.listOfSearchRecords}" var="singleRec">
                  <c:customLookupResult oAccount="{!singleRec}" />
               </aura:iteration>
            </ul>
         </div>
      </div>
   </div>
</aura:component>

JS Controller [customLookupController.js]

({
  
	keyPressController : function(component, event, helper) {
      // get the search Input keyword   
		var getInputkeyWord = component.get("v.SearchKeyWord");
      // check if getInputKeyWord size id more then 0 then open the lookup result List and 
      // call the helper 
      // else close the lookup result List part.   
        if( getInputkeyWord.length > 0 ){
             var forOpen = component.find("searchRes");
               $A.util.addClass(forOpen, 'slds-is-open');
               $A.util.removeClass(forOpen, 'slds-is-close');
            helper.searchHelper(component,event,getInputkeyWord);
        }
        else{  
            component.set("v.listOfSearchRecords", null ); 
             var forclose = component.find("searchRes");
               $A.util.addClass(forclose, 'slds-is-close');
               $A.util.removeClass(forclose, 'slds-is-open');
          }
         
	},
  
  // function for clear the Record Selaction 
    clear :function(component,event,heplper){
      
         var pillTarget = component.find("lookup-pill");
         var lookUpTarget = component.find("lookupField"); 
        
         $A.util.addClass(pillTarget, 'slds-hide');
         $A.util.removeClass(pillTarget, 'slds-show');
        
         $A.util.addClass(lookUpTarget, 'slds-show');
         $A.util.removeClass(lookUpTarget, 'slds-hide');
      
         component.set("v.SearchKeyWord",null);
         component.set("v.listOfSearchRecords", null );
    },
    
  // This function call when the end User Select any record from the result list.   
    handleComponentEvent : function(component, event, helper) {
     
    // get the selected Account record from the COMPONETN event 	 
       var selectedAccountGetFromEvent = event.getParam("accountByEvent");
	   
	   component.set("v.selectedRecord" , selectedAccountGetFromEvent); 
       
        var forclose = component.find("lookup-pill");
           $A.util.addClass(forclose, 'slds-show');
           $A.util.removeClass(forclose, 'slds-hide');
      
        
        var forclose = component.find("searchRes");
           $A.util.addClass(forclose, 'slds-is-close');
           $A.util.removeClass(forclose, 'slds-is-open');
        
        var lookUpTarget = component.find("lookupField");
            $A.util.addClass(lookUpTarget, 'slds-hide');
            $A.util.removeClass(lookUpTarget, 'slds-show');  
      
	},
  // automatically call when the component is done waiting for a response to a server request.  
    hideSpinner : function (component, event, helper) {
        var spinner = component.find('spinner');
        var evt = spinner.get("e.toggle");
        evt.setParams({ isVisible : false });
        evt.fire();    
    },
 // automatically call when the component is waiting for a response to a server request.
    showSpinner : function (component, event, helper) {
        var spinner = component.find('spinner');
        var evt = spinner.get("e.toggle");
        evt.setParams({ isVisible : true });
        evt.fire();    
    },
    
})

JS Helper [customLookupHelper.js]

({
	searchHelper : function(component,event,getInputkeyWord) {
	  // call the apex class method 
     var action = component.get("c.fetchAccount");
      // set param to method  
        action.setParams({
            'searchKeyWord': getInputkeyWord
          });
      // set a callBack    
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var storeResponse = response.getReturnValue();
              // if storeResponse size is equal 0 ,display No Result Found... message on screen.
                if (storeResponse.length == 0) {
                    component.set("v.Message", 'No Result Found...');
                } else {
                    component.set("v.Message", 'Search Result...');
                }
                
                // set searchResult list with return value from server.
                component.set("v.listOfSearchRecords", storeResponse);
            }
 
        });
      // enqueue the Action  
        $A.enqueueAction(action);
    
	},
})

TestApp.app

<aura:application >
  <c:customLookup/>
 <!-- here c: is org. namespace prefix-->
</aura:application>

Output :

Related Resources :

Salesforce Lightning Design System Lookup

Lightning Component Events

ui:Spinner

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. ?