JQuery - 使用选择器：包含 - 奇怪的结果

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 评估按键时，在第一个keydown事件中为空，然后在整个步骤之外

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

示例：

如果我输入 100004 ，请让我向 Chrome 显示我的 console.log 结果，以便输入该结果：

结果似乎总是落后一步。 keydown事件是最好用的还是我错过了什么。

一如既往 - 感谢大家和快乐的编码。

Answer 1

因为keydown事件上的this.value不包含触发事件的keystoke。请改用密钥。

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

http://jsfiddle.net/rlemon/TGBUe/1/在这个例子中你可以打开你的控制台...并在输入中输入一个字符......你会注意到第一个字符串的keydown this.value是空白而keyup包含它。

Answer 2

在 AJAX部分完成之前，可能会检查。

请注意，AJAX是异步的，无论AJAX请求是什么，代码都会继续流动，这是异步完成的。

尝试移动逻辑 function(JSONData)。