How to trigger select on user-specified input

[jackdreilly]

I'm using paper-autocomplete as a "suggestion" service in a search box, where we show guesses for what the user wants to search for in the suggestions, but still want to allow the user to submit their own search query.

What's the easiest way to get this functionality, where either we trigger a select when the user selects an item from the dropdown, or we trigger a select when the user hits Enter, for instance?

Currently, I'm doing the following:

inputRemote.querySelector("input").addEventListener('change', function(e) {
      if (document.activeElement == this) {
        if (inputRemote.querySelector("paper-item[aria-selected=true]") != null) {
          return false;
        }
        inputRemote._fireEvent({
          text: inputRemote.text,
          value: inputRemote.text
        }, 'selected');
        inputRemote.reset();
        return true;
      }
    });

[Link2Twenty]

You could do something like this. If the user's input matches something you've got in your list of suggestions it will return true, otherwise, it will return false.

function guessSelected(element) {
  if(element.source.indexOf(element.text) >= 0) {
    return true
  } else {
    return false
  }
}

You could do this too (it's shorter) but I like to over communicate with code 🙂

function guessSelected(element) {
  return (element.source.indexOf(element.text) >= 0) 
}

to call it you'd have to do something like.

if(guessSelected(inputRemote)){
  // what you want to happen if they selected an option
} else {
  // what you want to happen if they input their own
}