<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" controller="SimpleLookupController" access="global" >
    <aura:attribute name="label" type="String" access="global" default="Search"/>
    <aura:attribute name="selectedRecord" type="sObject" default="" />
    <aura:attribute name="fetchedRecords" type="List" />
    <aura:attribute name="searchText" type="String"/>
    
    <div aura:id="lookUpPane" class="slds-form-element slds-lookup slds-is-close" onmouseleave="{!c.onLeaveLookupPane}">
        <label class="slds-form-element__label" for="lookup-text">{!v.label}</label>
        <div class="slds-form-element__control">
            <div aura:id="master-container" class="slds-combobox_container slds-has-object-switcher">
                <div class="slds-input-has-icon slds-input-has-icon–right input-container">
                    <div aura:id="selected-item-pill" class="slds-hide pill-container">
                        <lightning:pill class="pill-item-size" label="{!v.selectedRecord.Name}" name="{!v.selectedRecord.Name}" onremove="{! c.remove }">
                        </lightning:pill>
                    </div>
                    <div aura:id="input-area" class="slds-show">
                        <lightning:icon class="slds-input__icon slds-show" iconName="utility:search " size="x-small" alternativeText="search"/> 
                        <ui:inputText aura:id="searchContent" class="slds-lookup__search-input slds-input input-no-border" value="{!v.searchText}" updateOn="keyup" keyup="{!c.onInputChange}" click="{!c.onSearchInputClick}"/>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="listbox-unique-id" class="lookup-container" role="listbox">
            <ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid slds-lookup__menu" role="presentation">
                <aura:iteration var="record" items="{!v.fetchedRecords}" indexVar="index">
                    <li role="presentation" class="slds-listbox__item" onclick="{!c.selectedRecordRowClick}" data-index="{!index}">
                        <div id="listbox-option-unique-id-01" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
                            <span class="slds-media__figure">
                                <span class="slds-icon_container slds-icon-standard-account">
                                    <lightning:icon iconName="action:new_account" class="slds-icon slds-icon slds-icon_small slds-icon-text-default" size="x-small"/>
                                </span>
                            </span>
                            <span class="slds-media__body">
                                <span class="slds-listbox__option-meta slds-listbox__option-meta_entity">{!record.Name}</span>
                                <span class="slds-listbox__option-meta slds-listbox__option-meta_entity">{!record.Industry}</span>
                                <span class="slds-listbox__option-meta slds-listbox__option-meta_entity">{!record.Accountnumber}</span>
                            </span>
                        </div>
                    </li>
                </aura:iteration>
            </ul>
        </div>
        
    </div>
</aura:component>

({
    onLeaveLookupPane : function(component, event, helper) {
        //Search – Input control focus removed on mouse leave
        var inputContainerCmp = component.find('master-container');
        helper.removeClass(inputContainerCmp,'slds-has-input-focus');
    },
    remove : function (component, event, helper) {
        //Hide the active SLDS – pill
        var selectedItemPill = component.find('selected-item-pill');
        helper.hideElement(selectedItemPill);
        
        //Show search-input control
        var inputElement = component.find('input-area');
        helper.showElement(inputElement);
    },
    onInputChange : function (component, event, helper) {
        var searchContent = component.get("v.searchText");
        var lookupContainerCmp = component.find("lookUpPane");
        if ( searchContent && searchContent.trim().length > 0 ) {
            searchContent = searchContent.trim();
            helper.addClass(lookupContainerCmp,'slds-is-open');
            helper.removeClass(lookupContainerCmp,'slds-is-close');
            helper.searchContent(component,searchContent);
        } else {
            helper.removeClass(lookupContainerCmp,'slds-is-open');
            helper.addClass(lookupContainerCmp,'slds-is-close');
        }
        
    },
    onSearchInputClick : function (component, event, helper) {
        //input control foucs enabled by adding focus style class
        var inputContainerCmp = component.find('master-container');
        helper.addClass(inputContainerCmp,'slds-has-input-focus');
    },
    selectedRecordRowClick : function (component, event, helper) {
        //event triggered on lookup row selection
        //fetching the details of selected row and it's index
        var targetSource = event.currentTarget;
        var selectedIndex = targetSource.dataset.index;
        
        console.log(targetSource,selectedIndex);
        var listedRecords = component.get("v.fetchedRecords");
        if (listedRecords && listedRecords.length > 0 && +selectedIndex >=0) {
            var selectedRecord = listedRecords[selectedIndex];
            //alert('selectedRecord ==> ' +JSON.stringify(selectedRecord));
            //Search input control value resets
            component.set("v.selectedRecord",selectedRecord);
            component.find("searchContent").set("v.value",""); 
            
            //Hide the lookup
            var lookupContainerCmp = component.find("lookUpPane");
            helper.removeClass(lookupContainerCmp,'slds-is-open');
            helper.addClass(lookupContainerCmp,'slds-is-close');
            
            //Show Selected row content as a SLDS – pill
            var selectedItemPill = component.find('selected-item-pill');
            helper.showElement(selectedItemPill);
            
            //Hide the search-input control
            var inputElement = component.find('input-area');
            helper.hideElement(inputElement);
        }
    }
})

({
    addClass : function (element, className) {
        //Global Aura util method for adding a style class from an aura element
        $A.util.addClass(element,className);
    }, 
    
    removeClass : function (element , className) {
        //Global Aura util method for removing a style class from an aura element
        $A.util.removeClass(element,className);
    },
    
    showElement : function (element) {
        //To show an aura html element
        var self = this;
        self.removeClass(element,'slds-hide');
        self.addClass(element,'slds-show');
    },
    
    hideElement : function (element) {
        //To hide an aura html element
        var self = this;
        self.removeClass(element,'slds-show');
        self.addClass(element,'slds-hide');
    },
    searchContent : function (component,searchContent) {
        var action = component.get("c.fetchAccount");
        // set param to method  
        action.setParams({
            'searchKeyWord': searchContent
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var storeResponse = response.getReturnValue();
                console.log(' storeResponse ==> '+ JSON.stringify(storeResponse));
                // if storeResponse size is equal 0 ,display No Result Found... message on screen.
                if (storeResponse.length == 0) {
                } else {
                }
                component.set("v.fetchedRecords", storeResponse);
            }
        });
        $A.enqueueAction(action);
        
    }
})

.THIS .pill-item-size,.THIS .input-container {
    width : 100%
}

.THIS .pill-container{
    font-size: medium;
    margin: .5px;
}

.THIS .input-no-border{
    border : transparent;
}
.THIS .input-no-border:focus{
    outline: transparent;
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
}

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