jQuery keypress()处理程序:管理事件流

时间:2011-01-24 15:01:02

标签: javascript jquery

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

1 个答案:

答案 0 :(得分:0)

我不确定我理解你想要什么,而且我很确定我不懂代码, 所以无论如何我都回答了​​,希望它可以帮助你解决问题......

我写了一个小代码,它会做你想要的第一件事: 选择写元素。

<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