You need to sign in to do that
Don't have an account?
Bryant Daniels 46
Set Focus and Handling Up and Down Keyboard Events
Hello I am trying to create a autocomplete using lighting components, The first attempt was to use the lighting:combobox but this doesn't allow me to use the input box such as input of type search. I am able to use some of the documentation from the lighting design system, but I am unable to set the focus to the 1st index of the listitem in my aura:iteration. It would be great to just use the lightning:combox instead of using all of the markup from the lightingdesignsytem. One thing to mention is I don't get the options when the page loads I don't receive any options for the filteredOptions attribute until i type 2 characters into the input
<aura:attribute name="searchTerm" type="String" /> <aura:attribute name="searchPlaceHolder" type="string" default="" /> <aura:attribute name="searchLabel" type="string" default="" /> <aura:attribute name="showLabel" type="boolean" default="false" /> <aura:attribute name="isAutoComplete" type="boolean" /> <aura:attribute name="showComboBoxOptions" type="boolean" default="false" /> <aura:attribute name="setAriaExpanded" type="boolean" default="false" /> <aura:attribute name="filteredOptions" type="String[]" /> <aura:handler name="change" value="{!v.searchTerm}" action="{!c.onChangeSearchText}" /> <div class="slds-form-element"> <div class="slds-combobox_container"> <div class="{!v.showComboBoxOptions ? 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open' : 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click'}" aria-expanded="{!v.setAriaExpanded}" aria-haspopup="listbox" role="combobox"> <div onkeyup="{!c.onChangeSearchText}"> <lightning:input name="search-input" label="{v.searchLabel}" type="search" placeholder="{!v.placeHolder}" aura:id="searchInput" value="{!v.searchTerm}" variant="{!v.showLabel ? '' : 'label-hidden'}" aria-activedescendant="option1" /> </div> <div id="listbox-id-16" class="slds-dropdown slds-dropdown_fluid" role="listbox"> <ul class="slds-listbox slds-listbox_vertical" role="presentation"> <aura:iteration items="{!v.filteredOptions}" var="option" indexVar="index"> <li role="presentation" class="slds-listbox__item" data-value="{!option.value}" data-record="{!option.label}"> <div aria-selected="true" id="option1" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_term " role="option"> <span class="slds-media__body"> <span class="slds-listbox__option-text slds-listbox__option-text_entity">{!option.label}</span> </span> </div> </li> </aura:iteration> </ul> </div> </div> </div> </div>