How to access the values from plain html inputs, when building an aura component?

Question

I'm working on implementing multi-entity lookup from the SLDS examples https://www.lightningdesignsystem.com/components/lookups/#Multi-Entity

I'm trying to capture the user's input in the aura component controller.

Full Component:

<aura:component >
  <aura:attribute name="isexpandedLookup" type="boolean" default="false" />
   <div class="slds-combobox_container slds-combobox-addon_end">
    <label style="height:18px;" class="slds-form-element__label"><span class="" ></span></label>
    <div class="{!'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click' + (v.isexpandedLookup ? ' slds-is-open' : '')}" id="primary-combobox-id-1">
        <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" onclick="{!c.changeStateLookup}" role="none">
            <input variant="label:hidden" type="text" label="" aura:id="combobox-id-1" class="slds-input slds-combobox__input" id="combobox-id-1" aria-autocomplete="list" aria-controls="listbox-id-1" aria-expanded="{!v.isexpandedLookup}" aria-haspopup="listbox" autoComplete="off" role="combobox" placeholder="Search..." onkeyup="{!c.handleKeyUp}" />
        </div>
    </div>
  </div>
</aura:component>

Controller:

({
  handleKeyUp : function(cmp, evt, helper){
    console.log(cmp.find('combobox-id-1').get('v.value'));
  }
})

it works when I use a Lightning:input like this

<lightning:input variant="label:hidden" type="text" label="" aura:id="combobox-id-1" class="slds-input slds-combobox__input" id="combobox-id-1" aria-autocomplete="list" aria-controls="listbox-id-1" aria-expanded="{!v.isexpandedLookup}" aria-haspopup="listbox" autoComplete="off" role="combobox" placeholder="Search..." onkeyup="{!c.handleKeyUp}" />

But if I use a plain input, it doesn't

<input variant="label:hidden" type="text" label="" aura:id="combobox-id-1" class="slds-input slds-combobox__input" id="combobox-id-1" aria-autocomplete="list" aria-controls="listbox-id-1" aria-expanded="{!v.isexpandedLookup}" aria-haspopup="listbox" autoComplete="off" role="combobox" placeholder="Search..." onkeyup="{!c.handleKeyUp}" />

get('v.value') returns undefined

How can you retrieve the input value when using standard input tags?

Answer 1

You can try this -

document.querySelector('#combobox-id-1').value