function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Vaibhab ShahVaibhab Shah 

Account tile in searchable dropdown

Hi,
Requirement is to show Account name with Account Industry and Account no. when user is searching the Account in the custom searchable dropdown. Doing this in Aura.
Any help on this?
Rgds,
Vai.
Maharajan CMaharajan C
Hi Vaibhab,

Please try the below code:

Here am displaying the account details vertically if you want you can change:

Component:
 
<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>

Controller:
 
({
    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);
        }
    }
})

JS Helper:
 
({
    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);
        
    }
})

CSS:
 
.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;
}

Apex Class:
 
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;
 }
}

Thanks,
Maharajan.C