JQuery - 使用选择器:contains - 奇怪的结果

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结果：

结果似乎总是比实际输入滞后一步。是keydown事件最好使用的还是我遗漏了什么东西。

像往常一样-感谢大家，祝编码愉快。

- garfbradaz

---

对于一个非常详细的问题，提供了所有可能需要修复它的信息，我会给予+1的评价。 - Loktar

Answer 1

因为在 keydown 事件中，this.value 不包含触发事件的按键。请改用 keyup 事件。您可以通过事件对象访问按键，该对象在函数中可用...但是直到按键释放后，输入框的值才会包含它。

在此示例中，您可以打开控制台...并在输入框中输入字符...您会注意到第一个字符的 keydown this.value 是空白的，而 keyup 包含了它。

- rlemon

Answer 2

可能是检查在 AJAX 部分完成之前就触发了。

请注意，AJAX 是异步的，代码会继续执行其流程，而不管已异步完成的 AJAX 请求。

尝试将逻辑移动到 function(JSONData) 内部。

- Cranio