SimpleLookup.html

<aura:component >
    <aura:attribute name="label" type="String" access="global" default="Search"/>
    <aura:attribute name="selectedRecord" type="sObject" default="{name:'Account1'}" />
    <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">
                    <!-- This part displays the slds pill -->
                    <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>
                    <!-- This part displays the input control for search-->
                    <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>
        <!--
            Lookup container to list down the records matched with the criteria
        -->
         <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" title="Description of icon when needed">
                                    
                                    <span class="slds-assistive-text">Description of icon when needed</span>
                                </span>
                            </span>-->
                            <span class="slds-media__body">
                                <span class="slds-listbox__option-text slds-listbox__option-text_entity">{!record.name}</span>
                                <span class="slds-listbox__option-meta slds-listbox__option-meta_entity">{!record.description}</span>
                            </span>
                        </div>
                    </li>
                </aura:iteration>
            </ul>
        </div>
        
    </div>
</aura:component>