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

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

有人能想出一个聪明的方法在jQuery中做到这一点吗？

Answer 1

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

为@JMC建议，为每个选项添加属性。但是，我会在属性名称前添加“data-”以与HTML5 standards一致。 jQuery（自v1.4.3起）还支持使用.data()检索以“data-”开头的属性。
绑定到按键事件。这比keyup更正确，原因如下：
1. 从语义上讲，按键意味着用户输入已经发生，而keyup意味着物理键被解除。例如，按住某个键将生成多个按键事件（对于屏幕上显示的每个字符），而只有一个键盘事件。当用户快速键入“QW”时，Keypress也不容易错误地接收按键顺序，但在“Q”键之前抬起“W”键（一个键）。
2. 密钥将在非字符键上生成，例如箭头，退格键等，而keypress则不会。
使用计时器来区分两个孤立的按键和一个按键序列，例如用户对威廉·莎士比亚的意思是“W”，而那么“P”代表Phillip Larkin，或只是“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;
});

Answer 2

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

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

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

在将额外属性添加到选项后，只需检查搜索框的keyup上的那些值。

Answer 3

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

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

另见this SO question。

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

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

3 个答案: