Question

我有一些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新手！

Answer 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”。那删除怎么样？还是退格？你应该考虑这些并删除用户希望删除的字母。对我来说太乱了。

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

第四，您的所有其他代码都应该转到其他功能。将它们保存在同一个地方是......好吧......不是我的风格。

顺便说一句

正如你所看到的，为了不做不必要的行动，我提出了一个条件，说最小长度为2个字母。

希望它有所帮助， ELAD。

My Development Blog

jQuery keypress（）处理程序：管理事件流

1 个答案: