javascript - JQuery - 使用选择器 :contains - Weird Results

Question

到目前为止的故事......

我想学习 JQuery，我也在构建一个 MVC ASP.NET 应用程序，它需要“键入时搜索”搜索功能 - 也非常适合学习 JQuery!到目前为止(在 stackoverflowers 的帮助下)我已经设法获得了 AJAX/JSON 位。现在我想评估每个按键并根据创建为无序列表的 JSON 数组对其进行验证。我试图实现的是只显示列表中的帐号包含输入的内容。所以，我的理由是检查 keydown 事件并验证它。目前我只是将帐号的颜色更改为隐藏它们的红色，只是为了证明我的逻辑有效。

到目前为止我的 JQuery 代码....

http://jsfiddle.net/garfbradaz/JYdTU/28/

...为了方便...

$(document).ready(function() {
var $input = $("#livesearchinput"),
    filled = false;
$.ajaxSetup({
    cache: false
});
$input.keydown(function(key) {
    if (!filled) {
        filled = true;
        $.getJSON("/gh/get/response.json//garfbradaz/MvcLiveSearch/tree/master/JSFiddleAjaxReponses/", function(JSONData) {
            var $ul =
            $('<ul>').attr({
                id: "live-list"
            }).appendTo('div#livesearchesults');
            $.each(JSONData, function(i, item) {
                $.each(item, function(j, val) {
                    $('<li>').attr({
                        id: "live-" + val
                    }).append(val).appendTo($ul);
                });
            });
        });
    }

    var n = $("li:contains('" + this.value + "')").length;

    if (n === 0) {
        $("li").removeClass("color-change");
        console.log("1. value of n equals " + n + " : " + this.value);
    }
    else {
        $("li:contains('" + this.value + "')").addClass("color-change");
        console.log("2. value of n equals " + n + " : " + this.value);
    }

});

});

我的问题.....

我的问题是，当我使用以下 this.value 评估按键时，在第一个按键事件中为空，然后在整个过程中失调

 var n = $("li:contains('" + this.value + "')").length

例子:

如果我输入 100004，让我向您展示我从 Chrome 输入该结果的 console.log 结果:

结果似乎总是落后一步。按键事件是最好用的还是我遗漏了什么？

一如既往 - 谢谢大家，祝您编码愉快。

Answer 1

因为 keydown 事件上的 this.value 不包含触发该事件的击键。请改用 keyup。

您可以通过函数中可用的事件对象访问击键……但是在释放键之前，输入的值不会包含它。

http://jsfiddle.net/rlemon/TGBUe/1/在此示例中，您可以打开控制台...并在输入中键入一个字符...您会注意到第一个字符的 keydown this.value 为空，而 keyup 包含它。