分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 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 SELEct元素是如何工作的,不管它在不同的浏览器中是否有所不同等等 – 而且似乎很难为此找到好的文档.

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

解决方法

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

>为@JMC建议,为每个选项添加属性.但是,我会在属性名称前添加“data-”以符合HTML5 standards.jQuery(从v1.4.3开始)也支持使用.data()检索以“data-”开头的属性.
>绑定到按键事件.这比keyup更正确,原因如下：

>从语义上讲,按键意味着用户输入已经发生,而keyup意味着物理键被解除.例如,按住某个键将生成多个按键事件(对于屏幕上显示的每个字符),而只有一个键盘事件.当用户快速键入“QW”时,Keypress也不容易错误地接收按键顺序,而是在“Q”键之前提起“W”键(一个键).
>键盘将在非字符键上生成,例如箭头,退格键等,而按键则不会.

>使用计时器来区分两个孤立的按键和一个按键序列,例如用户的意思是威廉·莎士比亚的“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;
});