HTML <select>: focus option based on user input?

Question

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 focuses on Phillip Larkin . Familiar behavior.

What I would like to do (preferably using jQuery) also allows the user to enter the initials of the poet and enable the corresponding parameter.

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, regardless of whether it is different from different browsers, etc. - and it seems hard to find good documentation for this.

Can anyone figure out a smart way to do this in jQuery?

Answer 1

Here is the complete solution:

• Add attributes for each option, as @JMC suggests. However, I would add the attribute name “data-” in accordance with HTML5 standards . jQuery (since version 1.4.3) also supports retrieving attributes starting with "data-" using .data() .
• Bind to a keystroke event. This is more correct than the keyboard for the following reasons:
  • Semantically, a keystroke means that user input has occurred, and keyup means that the physical key is cleared. For example, a keystroke will result in several keystroke events (for each character appearing on the screen), while there is only one keyup event. Keypress is also not prone to getting the order of keystrokes incorrectly when the user types “QW” quickly, but raises the “W” key (key) before the “Q” key.
  • The key will be created on asymmetric keys, such as arrows, backspace, etc., while pressing the key will not.
• Use a timer to distinguish between two isolated keystrokes and one keystroke sequence, for example. whether the user made a “W” for William Shakespeare, and then a “P” for Phillip Larkin or just “WP” for ... Whatever the poet.

HTML

 <select id="poetslist"> <option value="shakespeare" data-initial="WS">William Shakespeare</option> <option value="milton" data-initial="JM">John Milton</option> <option value="keats" data-initial="JK">John Keats</option> <option value="wordsworth" data-initial="WW">William Wordsworth</option> <option value="larkin" data-initial="PL">Phillip Larkin</option> </select> 

Javascript

 var timer = null, initials = ""; $("#poetslist").keypress(function (e) { initials += String.fromCharCode(e.which).toUpperCase(); // Look for option with initials beginning with the typed chars $(this).find("option").filter(function () { return $(this).data("initial").toUpperCase().indexOf(initials) === 0; }).first().attr("selected", true); // Set/reset timer if (timer) { clearTimeout(timer); timer = null; } timer = setTimeout(function () { timer = null; initials = ""; }, 2000); // Max 2 second pause allowed between key presses return false; }); 

Answer 2

Given @Charlie, if you have access to the html assembly in the first place, it may be easier to add an additional attribute to the option element, for example

 <option init="WW" value="wordsworth">William Wordsworth</option> <option init="PL" value="larkin">Phillip Larkin</opt 

If you cannot do this on the server, jQuery can easily insert an additional attribute into the parameter based on its value. Assuming, of course, that you know in advance all the meanings that you have.

After receiving an additional attribute in this option, you just need to check these values ​​on the keyboard of the search window.

Answer 3

The main magic that you need is to set the "selected" property to one of the parameters. Give everyone an identifier. Then use

 $('#anId').attr('selected','selected'); 

See also this SO question .

Now, for selection behavior, you probably need to intercept clicked events and make your own logic. The hardest part is probably figuring out what to do for odd cases, for example, what happens when someone prints "JKM" - Keats or Milton?