+ Start a Discussion
Bryant Daniels 46Bryant 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>