CODEWITHSUNDEEP
javascriptjqueryhtml
kfirba
kfirba

Reputation: 5441

HTML select tag autocomplete

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.

Upvotes: 4

Views: 34828

Answers (3)

Abdul Hannan
Abdul Hannan

Reputation: 424

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

Upvotes: 3

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

DEMO

What you are asking for is the default functionality of drop-down-list.

if you want to search the drop-down-list you can try this plugin.

jQuery Searchable DropDown Plugin Demo

DEMO - with your code

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

you can also try DEMO

Upvotes: 2

Amith
Amith

Reputation: 1434

I think this is the default action of drop down(select control). You have to do zero effort to achieve it.

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

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

Upvotes: 2

Related Questions