You need to sign in to do that
Don't have an account?
Andrew 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
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
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
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.
Thank you sir! You were an immense help to me today.
i want to create autocomplete in lightning web component. Please help