This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<aura:component controller="LookupSearchComponentController"> | |
<aura:attribute name="objectName" type="String" default="Account"/> | |
<aura:attribute name="fieldName" type="String" default="Name"/> | |
<aura:attribute name="selectRecordId" type="String"/> | |
<aura:attribute name="selectRecordName" type="String"/> | |
<aura:attribute name="Label" type="String"/> | |
<aura:attribute name="searchRecords" type="List"/> | |
<aura:attribute name="required" type="Boolean" default="false"/> | |
<aura:attribute name="iconName" type="String" default="action:new_account"/> | |
<aura:attribute name="LoadingText" type="Boolean" default="false"/> | |
<div> | |
<div class="slds-form-element"> | |
<div class="slds-form-element__control"> | |
<div class="slds-combobox_container"> | |
<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" aura:id="resultBox" aria-expanded="false" aria-haspopup="listbox" role="combobox"> | |
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon slds-input-has-icon_left-right" role="none"> | |
<aura:if isTrue="{!!empty(v.selectRecordId)}"> | |
<span class="slds-icon_container slds-icon-utility-search slds-input__icon iconheight"> | |
<lightning:icon class="slds-icon slds-icon slds-icon_small slds-icon-text-default" iconName="{!v.iconName}" size="x-small" alternativeText="icon" /> | |
</span> | |
</aura:if> | |
<lightning:input required="{!v.required}" aura:id="userinput" label="{!v.Label}" name="searchText" onchange="{!c.searchField}" value="{!v.selectRecordName}" class="leftspace"/> | |
<aura:if isTrue="{!empty(v.selectRecordId)}"> | |
<span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right iconheight"> | |
<lightning:icon class="slds-icon slds-icon slds-icon_small slds-icon-text-default" iconName="utility:search" size="x-small" alternativeText="icon" /> | |
</span> | |
<aura:set attribute="else"> | |
<button class="slds-input__icon slds-input__icon_right slds-button slds-button_icon iconheight" onclick="{!c.resetData}"> | |
<lightning:icon class="slds-icon slds-icon slds-icon_small slds-icon-text-default" iconName="utility:clear" size="x-small" alternativeText="icon" /> | |
<span class="slds-assistive-text">Clear</span></button> | |
</aura:set> | |
</aura:if> | |
</div> | |
<!-- Second part display result --> | |
<div id="listbox-id-1" class="slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid" role="listbox"> | |
<ul class="slds-listbox slds-listbox_vertical" role="presentation"> | |
<aura:iteration items="{!v.searchRecords}" var="serecord" indexVar="hdtv"> | |
<li role="presentation" class="slds-listbox__item"> | |
<div id="{!serecord.recId}" data-name="{!serecord.recName}" onclick="{!c.setSelectedRecord}" 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="{!v.iconName}" 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-text slds-listbox__option-text_entity">{!serecord.recName}</span> | |
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">{!v.objectName} • {!serecord.recName}</span> | |
</span> | |
</div> | |
</li> | |
</aura:iteration> | |
<aura:if isTrue="{!and(v.searchRecords.length == 0 , !v.LoadingText)}"> | |
No result found. | |
</aura:if> | |
<aura:if isTrue="{!v.LoadingText}"> | |
Loading... | |
</aura:if> | |
</ul> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</aura:component> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.THIS .slds-leftpad{ | |
padding-left: 2rem; | |
} | |
.THIS .iconheight{ | |
top: 65%; | |
} | |
.THIS .leftspace input { | |
padding-left:2rem; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
({ | |
searchField : function(component, event, helper) { | |
var currentText = event.getSource().get("v.value"); | |
var resultBox = component.find('resultBox'); | |
component.set("v.LoadingText", true); | |
if(currentText.length > 0) { | |
$A.util.addClass(resultBox, 'slds-is-open'); | |
} | |
else { | |
$A.util.removeClass(resultBox, 'slds-is-open'); | |
} | |
var action = component.get("c.getResults"); | |
action.setParams({ | |
"ObjectName" : component.get("v.objectName"), | |
"fieldName" : component.get("v.fieldName"), | |
"value" : currentText | |
}); | |
action.setCallback(this, function(response){ | |
var STATE = response.getState(); | |
if(STATE === "SUCCESS") { | |
component.set("v.searchRecords", response.getReturnValue()); | |
if(component.get("v.searchRecords").length == 0) { | |
console.log('000000'); | |
} | |
} | |
else if (state === "ERROR") { | |
var errors = response.getError(); | |
if (errors) { | |
if (errors[0] && errors[0].message) { | |
console.log("Error message: " + | |
errors[0].message); | |
} | |
} else { | |
console.log("Unknown error"); | |
} | |
} | |
component.set("v.LoadingText", false); | |
}); | |
$A.enqueueAction(action); | |
}, | |
setSelectedRecord : function(component, event, helper) { | |
var currentText = event.currentTarget.id; | |
var resultBox = component.find('resultBox'); | |
$A.util.removeClass(resultBox, 'slds-is-open'); | |
//component.set("v.selectRecordName", currentText); | |
component.set("v.selectRecordName", event.currentTarget.dataset.name); | |
component.set("v.selectRecordId", currentText); | |
component.find('userinput').set("v.readonly", true); | |
}, | |
resetData : function(component, event, helper) { | |
component.set("v.selectRecordName", ""); | |
component.set("v.selectRecordId", ""); | |
component.find('userinput').set("v.readonly", false); | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
public class LookupSearchComponentController { | |
@AuraEnabled | |
public static List<SObJectResult> getResults(String ObjectName, String fieldName, String value) { | |
List<SObJectResult> sObjectResultList = new List<SObJectResult>(); | |
for(sObject so : Database.Query('Select Id,'+fieldName+' FROM '+ObjectName+' WHERE '+fieldName+' LIKE \'%' + value + '%\'')) { | |
String fieldvalue = (String)so.get(fieldName); | |
sObjectResultList.add(new SObjectResult(fieldvalue, so.Id)); | |
} | |
return sObjectResultList; | |
} | |
public class SObJectResult { | |
@AuraEnabled | |
public String recName; | |
@AuraEnabled | |
public Id recId; | |
public SObJectResult(String recNameTemp, Id recIdTemp) { | |
recName = recNameTemp; | |
recId = recIdTemp; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment