HTML< select&gt ;:基于用户输入的焦点选项? [英] HTML <select>: focus option based on user input?

问题描述

我有一个HTML select元素:

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>

在Chrome中，当页面加载时，选择了William Shakespeare选项.如果用户开始输入"Phil"，则列表会将焦点集中在Phillip Larkin上.熟悉的行为.

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.

我想做的事情(最好使用jQuery)是 ，它还允许用户键入诗人的 initials 并使相关选项成为焦点.

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.

因此，如果键入JK，则应该突出John Keats选项. JM和约翰·弥尔顿(John Milton)等.

So if you typed JK, then the John Keats option should come into focus. JM and John Milton, etc.

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

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.

有人能在jQuery中找到一种聪明的方法吗?

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

推荐答案

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

Here is a complete solution:

1. 按照@JMC的建议为每个选项添加属性.但是，我会在属性名称前添加"data-"，以符合 HTML5标准. jQuery(从v1.4.3开始)还支持使用 .data() 检索以"data-"开头的属性.
2. 绑定到按键事件.由于以下原因，这比keyup更为正确:

1. Add attributes to each option, as @JMC suggests. However, I'd prepend the attribute name with "data-" to be in line with HTML5 standards. jQuery (as of v1.4.3) also supports retrieving attributes beginning with "data-" using .data().
2. Bind to the keypress event. This is more correct than keyup for the following reasons:

1. 从语义上讲，按下键表示发生了用户输入，而按下键表示已抬起物理键.例如，按住一个键将生成多个按键事件(对于屏幕上显示的每个字符)，而只有一个按键事件.当用户快速键入"QW"时，按键也不会不正确地接收按键的顺序，而是在"Q"键之前抬起"W"键(一个按键).
2. 按键将在非字符键(例如箭头，退格键等)上生成，而按键则不会生成.

使用计时器来区分两个隔离的按键和单个按键序列，例如用户是为威廉·莎士比亚(William Shakespeare)表示"W"，还是菲利普·拉金(Phillip Larkin)表示 then "P"，或者是...不管是什么诗人，都只是"WP".

Use a timer to distinguish between two isolated key presses and a single sequence of key presses, e.g. did the user mean "W" for William Shakespeare and then "P" for Phillip Larkin, or just "WP" for ... Whatever 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;
});

这篇关于HTML< select&gt ;:基于用户输入的焦点选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！