HTML tag auto-complete

Question

I have a select tag as shown below:

<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> 

I want that whenever the user focuses on select , and by pressing the " G " key on his keyboard, the " Grapes " option will be automatically selected, and when he press " G " again, " Ginger " will be selected and so on.

I do not know how to do that.

Answer 1

Demo

What you request are the default default dropdown list functions.

if you want to find a dropdown, you can try this plugin.

jQuery Searchable DropDown Plugin Demo

DEMO - with code

 $('#fruits').searchable(); 

you can also try demo

Answer 2

I think this is the default action for the drop-down list (select control). You must perform zero effort to achieve this.

try this JSbin .. there is a selection box and when the user first presses g on the keyboard grapes is selected and on the second ginger is selected

http://jsbin.com/UYeZaPA/1/edit

Answer 3

Well, if you want to add the Auto Complete function to your html select element, then nothing is better than selectize.js

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

Go to the selection page here

Answer 4

Maybe check the HTML 5 datalist element:

https://www.w3schools.com/tags/tag_datalist.asp

Answer 5

It is effortless. Try it yourself in any browser. The browser does this for you by default. Try Chrome or any current browser

For example: Facebook Registration Form:

just select the month and press J

first he will show january

a second press of J will display june .. etc.