I have an HTML select element:
<select id='poetslist'>
<option value="shakespeare">William Shakespeare</option>
<option value="milton">John Milton</option>
<option value="keats">John Keats</option>
<option value="wordsworth">William Wordsworth</option>
<option value="larkin">Phillip Larkin</option>
</select>
In Chrome, when the page loads, the William Shakespeare
option is selected. If the user starts typing 'Phil', the list focusses itself on Phillip Larkin
. Familiar behaviour.
What I'd like to do (preferably using jQuery) is also allow the user to type the initials of the poet and have the relevant option come into focus.
So if you typed JK
, then the John Keats
option should come into focus. JM
and John Milton, etc.
I don't even know how the HTML select element works, whether it's different in different browsers, etc - and it seems to be hard to find good documentation for this.
Can anyone figure out a smart way to do this in jQuery?