Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.