Datalist - fully autocomplete input with top value from list

Viewed 35

Sorry if this is a duplicate, I can't find a similar question for the life of me.

I'm trying to use a <datalist> input on a form and it works but I need to have it 'autocomplete' the top search result right into the input box as the user types... Let me be clearer:

I already have the functionality working that filters out results based on what's typed into the <input> text box, as you would expect a <datalist> to behave. What I'd really like is for the user to not have to actually 'choose' a value and put it straight in.

This page (and the codepen therein) pretty much demonstrates what I'm looking to do (albeit without <datalist>) - note that as you type, the field is filled out for you with every keystroke - then you can just tab out of the field and keep your value

I have tried the above solution but for some reason in my project it does not work, even if I copy the code out verbatim.

Anyone know how I can acheive this with a <datalist>?

Edit: an image for further explanation - if I start typing 'all', I'd like 'AllStar Sports' to fill out the rest of the feild, as it was the top result:

Image showing example of requirements

0 Answers
Related