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
Andrew FandreAndrew Fandre 

Lightning autocomplete component

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 display 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}"/>
Display box. This is the element I want to populate
<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>
The 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 component controller
doInit : function(component, event, helper){
        helper.getTopicHelper(component,event,helper);
    }
Display component 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 component
<aura:event type="COMPONENT" description="this event will pass the selected topic into parent component" >
		<aura:attribute name="recordByEvent" type="sObject"/>
	</aura:event>
Any help would be appreciated
 
Best Answer chosen by Andrew Fandre
Alain CabonAlain Cabon
Hi,

Display box. This is the element I want to populate:

... but you don't fill the value v.SearchKeyWord and you don't fire an event either (or it is in the code that you didn't post)

<ui:inputText click="{!c.onfocus}" updateOn="keyup" keyup="{!c.keyPressController}"
class="slds-lookup__search-input slds-input leftPaddingClass"
value="{!v.SearchKeyWord}"
placeholder="search..."/>


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);    // that could be v.SearchKeyWord instead of v.selectedRecord ?
            component.set("v.selectedLookupRecord" , responseValue);
        } });
       $A.enqueueAction(action);
},

The code of the controller is missing. 

All Answers

Alain CabonAlain Cabon
Hi,

Display box. This is the element I want to populate:

... but you don't fill the value v.SearchKeyWord and you don't fire an event either (or it is in the code that you didn't post)

<ui:inputText click="{!c.onfocus}" updateOn="keyup" keyup="{!c.keyPressController}"
class="slds-lookup__search-input slds-input leftPaddingClass"
value="{!v.SearchKeyWord}"
placeholder="search..."/>


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);    // that could be v.SearchKeyWord instead of v.selectedRecord ?
            component.set("v.selectedLookupRecord" , responseValue);
        } });
       $A.enqueueAction(action);
},

The code of the controller is missing. 
This was selected as the best answer
Andrew FandreAndrew Fandre
That was it. I didn't populate the value for the SearchKeyWord.

Thank you sir! You were an immense help to me today.
Alain CabonAlain Cabon
Ok, is it solved?
Andrew FandreAndrew Fandre
Yes it is. Sometimes I miss some pretty obvious things, I appreciate your help.
Andrew FandreAndrew Fandre
To clarify the final helper looks like this:
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.SearchKeyWord" , responseValue.name);

            }           
        });
        $A.enqueueAction(action);

    },

 
Ashish Yadav 59Ashish Yadav 59
Hello Sir/ma'am,
i want to create autocomplete in lightning web component. Please help