jQuery keypress() 处理程序：管理事件流答案

【问题标题】：jQuery keypress() handler: managing flow of eventsjQuery keypress() 处理程序：管理事件流
【发布时间】：2011-07-04 21:19:03
【问题描述】：

我有一些 jQuery 代码可以根据用户输入 as per a previous question 聚焦 <select> 下拉列表。这里是：

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

    $("#userlist").keypress(function (e) {
        initials += String.fromCharCode(e.which).toUpperCase();
                // when the relevant initials are typed, select that item
        $(this).find("option").filter(function () {
            return $(this).attr("title").toUpperCase().indexOf(initials) === 0;
        }).first().attr("selected", true);
        $('#book_results').html(loading_img); // Show 'loading' gif
                // Then use get_books function to update some HTML on the page with relevant info
        get_books($(this).find("option").filter(function () {
            return $(this).attr("title").toUpperCase().indexOf(initials) === 0;
        }).first().val(), null, null);      
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        timer = setTimeout(function () {
            timer = null;
            initials = "";
        }, 2000); // Max 2 second pause allowed between key presses
        return false;
    });

这是非常有前途的，但我发现当用户键入例如首先选择“WW”，“William Shakespeare”，页面上的所有 HTML 都会为他更新，只有几秒钟后，下拉菜单才会“赶上”并更新“William Wordsworth”。

我确定这是我没有正确处理事件流的错，但是有人可以提出解决办法吗？注：我不能保证每件商品都有两个首字母。

感谢您帮助 JavaScript 新手！

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我不确定我是否理解你想要的，我很确定我没有理解代码，所以我还是回答了，希望它能帮助你解决你的问题......

我写了一个小代码来做你想做的第一件事：选择写入元素。

<body>
   <input type="text" id="userlist" />
   <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="JMI">John Keats</option>
       <option value="wordsworth" data-initial="WW">William Wordsworth</option>
       <option value="larkin" data-initial="PL">Phillip Larkin</option>
   </select>

   <script type="text/javascript">
        $("#userlist").keyup(function (e)
        {
            var initials = $("#userlist").val().toUpperCase();

            if (initials.length < 2)
                return;

            $("#poetslist option").each(function ()
            {
                if ($(this).attr("data-initial") == initials)
                {
                    SelectOptionEtc($(this));
                }
            });
        });

        function SelectOptionEtc(optionElement)
        {
           $(optionElement).attr("selected", true);
        }
    </script>
</body>

现在的文档：

首先我将触发器更改为“keyup”。我不喜欢“按键”的原因是不清楚它是在事件触发之前还是之后。并且因为“keydown”发生在你真正写信之前 - 这对我没有好处。

第二，我用的是输入文字。我可以每次都将字母保存在一个变量中，但这有几个原因是错误的： 1.+= 是你能做的最糟糕的事情。特别是在 JS 中。特别是如果首字母可以是 4-5 个字母。如果有的话，我会使用“.push”。 2.删除怎么办？还是退格？您应该考虑这些并删除用户希望删除的字母。对我来说太乱了。

第三，虽然使用“过滤器”和“查找”以及所有这些其他 jQuery 方法都不错，但我更喜欢尽可能保持简单和整洁。

第四，您的所有其他代码都应该转到不同的函数。把它们都放在同一个地方是……嗯……不是我的风格。

顺便说一句

如您所见，为了不做不必要的动作，我设置了一个条件，即最小长度为 2 个字母。

希望对你有所帮助，埃拉德。

My Development Blog

【讨论】：