HTML <select>:基于用户输入的焦点选项？

Question

我有一个HTML select元素:

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

在Chrome中,当页面加载时,William Shakespeare会选择该选项.如果用户开始输入"Phil",则列表会集中精力Phillip Larkin.熟悉的行为.

我想做的事情(最好使用jQuery)也允许用户输入诗人的首字母并让相关选项成为焦点.

因此,如果您键入JK,则该John Keats选项应该成为焦点.JM和约翰米尔顿等

我甚至不知道HTML select元素是如何工作的,不管它在不同的浏览器中是否有所不同等等 - 而且似乎很难为此找到好的文档.

谁能想出一个聪明的方法来在jQuery中做到这一点？

Answer 1

这是一个完整的解决方案:

1. 正如@JMC建议的那样,为每个选项添加属性.但是,我会在属性名称前添加"data-"以符合HTML5标准.jQuery(从v1.4.3开始)也支持检索以"data-"开头的属性.data().
2. 绑定到按键事件.这比keyup更正确,原因如下:
   1. 在语义上,按键意味着用户输入已经发生,而keyup意味着物理键被解除.例如,按住某个键将生成多个按键事件(对于屏幕上显示的每个字符),而只有一个键盘事件.当用户快速键入"QW"时,Keypress也不容易错误地接收按键顺序,而是在"Q"键之前提起"W"键(一个键).
   2. 密钥将在非字符键上生成,例如箭头,退格等...,而keypress则不会.
3. 使用计时器来区分两个孤立的按键和单个按键序列,例如用户对威廉莎士比亚的意思是"W",然后用Phillip Larkin的意思是"P",或者只是"WP"用于...无论诗人.

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;
});