javascript - 当用户在文本字段中键入时，根据特定数组键显示数组值

Question

我看过Display partial array value matches from user input并试图达到相同的结果。

区别在于数组格式。我希望搜索文本值与数组键名称相匹配。

无论我在文本字段中输入什么内容，它都会显示“找不到匹配项!”我永远无法显示这些名字。似乎 players[x].name.indexOf() 无法识别。如何显示姓名？

这里是Fiddle

    var players = [
                { "id" : "23012",
                  "name" : "Scott",
                  "first" : "Stve",
                  "last" : "Scott" },
                { "id" : "22904",
                  "name" : "Phillips, A",
                  "first" : "Adam",
                  "last" : "Phillips"},
                { "id" : "45783",
                  "name" : "Phillips, T",
                  "first" : "Tom",
                  "last" : "Phillips" },
                { "id" : "54762",
                  "name" : "Scobery",
                  "first" : "Don",
                  "last" : "Scobery" },
                { "id" : "78903",
                  "name" : "Phillip",
                  "first" : "Roger",
                  "last" : "Phillip"}
              ]

$("#searchField").on("keyup", function() {

    $(".append").empty();
    if($("#searchField").val() != ""){

        for(var x = 0; x < players.length; x++){
            if(players[x].name.indexOf(($("#searchField").val()).toLowerCase()) == 0){
               $(".append").append(players[x].name+"<br>");
             } else {
              $(".append").html("no match found!");
             }
        }
    }
});

Answer 1

Update Fiddle

您将覆盖第一次否定搜索时的所有搜索结果。因为您附加了附加结果，所以首先没有发现您使用 .html() 指令杀死了所有附加的子级。就是那个错误。我不确定你的 toLowerCase 使用情况，但这是另一个故事了。

    var players = [{
    "id": "23012",
        "name": "Scott",
        "first": "Stve",
        "last": "Scott"
}, {
    "id": "22904",
        "name": "Phillips, A",
        "first": "Adam",
        "last": "Phillips"
}, {
    "id": "45783",
        "name": "Phillips, T",
        "first": "Tom",
        "last": "Phillips"
}, {
    "id": "54762",
        "name": "Scobery",
        "first": "Don",
        "last": "Scobery"
}, {
    "id": "78903",
        "name": "Phillip",
        "first": "Roger",
        "last": "Phillip"
}]

$("#searchField").on("keyup", function () {
    var found = false;
    $(".append").empty();
    if ($("#searchField").val() != "") {

        for (var x = 0; x < players.length; x++) {
            if (players[x].name.indexOf($("#searchField").val()) >= 0) {
                found = true;
                $(".append").append(players[x].name + "<br>");
            }
        }
        if (!found) {
           $(".append").html("no match found");
        }
    }
}); // searchField on

要使搜索完全不区分大小写:

if (players[x].name.toLowerCase().indexOf($("#searchField").val().toLowerCase()) == 0)

垃圾邮件周围小写。 (到对象和输入)