javascript - 通过 json 实时搜索以查看给定字符串是否在数组中

Question

$(document).ready(function () {
    var names = ["nick", "nicky", "nickyy", "nick23", "nickfe09", "nickf9", "jim1", "jimbo2"];

    $.each(names, function (index, value) {
        $('<span>').html(value + '<br>').appendTo('#div');
    });

    $('#input').change(function (event) {
        $('#div > span:contains("' + $('#input').val() + '")').css('background', 'red');
    });
});

<div id="div"></div>
<input type="text" id="input">

再次问好 stackoverflow!

我有一个包含用户名的字符串。我想将它们显示在一个表中(或者在这个例子中，只是一个列表)，然后只显示其中的 10 个(最终列表中将有 ~200 个名字)。当用户在输入字段中输入内容时，例如 nic，我希望它过滤其余部分并显示 10 个最匹配的用户名。

我已经尝试了上面的设置，但这没有用。你们能帮帮我吗？

问候

fiddle :http://jsfiddle.net/4wZ2L/5/

Answer 1

See this working demo.

$(document).ready(function () {
    var names = ["nick", "nicky", "nickyy", "nick23", "nickfe09", "nickf9", "jim1", "jimbo2"];
    $.each(names, function (index, value) {
        $('<span>').html(value + '<br>').appendTo('#div');
    });
    $('#input').on("change keyup", function (event) {
        $('#div > span').css('background','');
        $('#div > span:contains("' + $(this).val() + '")').css('background', 'red');
    });
});

我所做的只是以下内容:

1. 使 #input 除了响应 change 之外，还响应 keyup 事件。
2. 在确定哪些匹配之前清除其格式的所有 spans。
3. 在您实际更改内容的行中，我将input.val 更改为$(this).val()。变量 input 未定义。

希望这对您有所帮助!