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

【问题标题】：HTML <select>: focus option based on user input?HTML <select>：基于用户输入的焦点选项？
【发布时间】：2011-06-03 17:24:38
【问题描述】：

我有一个 HTML 选择元素：

<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 和 John Milton 等。

我什至不知道 HTML 选择元素是如何工作的，它在不同的浏览器中是否不同，等等 - 似乎很难找到好的文档。

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

【问题讨论】：

标签： jquery html html-select

【解决方案1】：

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

按照@JMC 的建议，为每个选项添加属性。但是，我会在属性名称前加上“data-”以符合HTML5 standards。 jQuery（从 v1.4.3 开始）还支持使用 .data() 检索以“data-”开头的属性。
绑定到按键事件。这比 keyup 更正确，原因如下：
1. 从语义上讲，keypress 表示用户输入已经发生，而 keyup 表示物理键被抬起。例如，按住一个键会产生多个按键事件（对于屏幕上出现的每个字符），而只有一个按键事件。当用户快速键入“QW”但在“Q”键之前提起“W”键（按键）时，Keypress 也不容易错误地接收按键顺序。
2. Keyup 将在非字符键（如箭头、退格等）上生成，而 keypress 则不会。
使用计时器来区分两个独立的按键和单个按键序列，例如用户是指威廉莎士比亚的“W”和然后菲利普拉金的“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;
});

【讨论】：

【解决方案2】：

考虑到@Charlie 的回答，如果您首先有权构建 html，那么向选项元素添加一个额外的属性可能是最简单的，例如

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

如果您不能在服务器端执行此操作，jQuery 可以轻松地根据选项的值向选项插入一个额外的属性。当然，假设您事先知道其中的每个值。

在选项中添加额外属性后，只需在搜索框的 keyup 上检查这些值即可。

【讨论】：

【解决方案3】：

您需要的基本魔法是在其中一个选项上设置“选定”属性。给每个人一个ID。然后使用

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

另见this SO question。

现在，对于选择行为，您可能需要拦截key pressed events 并执行您自己的逻辑。最棘手的部分可能是弄清楚如何处理奇怪的情况，例如当有人键入“JKM”时会发生什么——济慈或米尔顿？

【讨论】：