0

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>
  • 1
    Hi there, and welcome to SFSE! In the future, please use the {} 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. – sfdcfox Jul 27 '18 at 14:16
0

An attribute I left out of the example was SearchKeyWord (you can see it in the lookup component) and that is what is controlling the display box. So once I added this to the helper

component.set("v.SearchKeyWord" , responseValue);

The value appeared in the combobox.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.