So I got a great autocomplete combobox example from here http://sfdcmonkey.com/2017/07/17/re-usable-custom-lookup/ and it works great. The autocomplete combobox composed two components one is the display, and the other is the lookup. When the lookup item is clicked it populates the display.
How do I populate the combobox when it loads?
I've added an init function and I get the stored value, and I can populate all the components in the init helper except I can't trigger the event or populate the lookupField with the value that's been stored. When I try to do anything on the doInit controller, nothing is defined, when I try to get to the view from the helper, nothing is defined. I'm bumping against the limits of my knowledge.
I'll try to strip out the non-related code to keep it brief, but I'll post the full code if necessary.
Display Component
<aura:component controller="lookupController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
access="global">
<aura:attribute name="selectedRecord" type="sObject" default="{}" description="Use,for store SELECTED sObject Record"/>
<aura:attribute name="selectedLookupRecord" type="sObject" default="{}" />
<aura:handler name="oSelectedRecordEvent" event="c:topicSelectEvent" action="{!c.handleComponentEvent}"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
Lookup field
<div aura:id="lookupField" class="slds-show">
<ui:inputText click="{!c.onfocus}"
updateOn="keyup"
keyup="{!c.keyPressController}"
class="slds-lookup__search-input slds-input leftPaddingClass"
value="{!v.SearchKeyWord}"
placeholder="search..."/>
</div>
Call to the lookup component
<ul style="min-height:40px;margin-top:0px !important"
class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid slds-lookup__menu slds"
role="listbox">
<center> {!v.Message}</center>
<aura:iteration items="{!v.listOfSearchRecords}" var="singleRec">
<c:TopicSelect_result oRecord="{!singleRec}"/>
</aura:iteration>
</ul>
Display Controller
doInit : function(component, event, helper){
helper.getTopicHelper(component,event,helper);
}
Display Helper
getTopicHelper : function(component,event) {
var action = component.get("c.getDefaultTopic");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var responseValue = response.getReturnValue();
component.set("v.selectedRecord" , responseValue);
component.set("v.selectedLookupRecord" , responseValue);
}
});
$A.enqueueAction(action);
},
Lookup Component
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
<aura:attribute name="oRecord" type="sObject" />
<!--Register the component level event-->
<aura:registerEvent name="oSelectedRecordEvent" type="c:ADF_topicSelectEvent"/>
<li role="presentation" class="slds-listbox__item" onclick="{!c.selectRecord}">
<span 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__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">{!v.oRecord.name}</span>
</span>
</span>
</li>
</aura:component>
Lookup Controller
({
selectRecord : function(component, event, helper){
var getSelectRecord = component.get("v.oRecord");
var compEvent = component.getEvent("oSelectedRecordEvent");
compEvent.setParams({"recordByEvent" : getSelectRecord });
compEvent.fire();
},
})
Event Handler
<aura:event type="COMPONENT" description="this event will pass the selected topic into parent component" >
<aura:attribute name="recordByEvent" type="sObject"/>
</aura:event>
{}
format option to format code. Removing characters doesn't make the code any more legible, it just makes it more frustrating. You can edit your question to revise it if you'd like.