HTML select tag autocomplete

Question

I got some select tag as follows:

<select id="fruits">
   <option value="1">Apple</option>
   <option value="2">Banana</option>
   <option value="3">Orange</option>
   <option value="4">Grapes</option>
   <option value="5">Ginger</option>
</select>

What I want to do is, whenever the user focus on the select, and he's clicking on the key "G" in his keyboard, the option "Grapes" will be automatically selected, and when he presses "G" once again, "Ginger" will be selected and so on.

I have no clue how to do it.

Answer 1

Well, If you want to add Auto Complete functionality to your html select element then there is nothing better than selectize.js

All you need to do is either include its css and js file in your project or you can use cdns.

Go to Selectize website here