在文本字段中显示基于某个数组键的数组值作为用户类型

Question

我查看了Display partial array value matches from user input 并尝试获得相同的结果。

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

无论我在文本字段中输入什么内容，它都会显示“未找到匹配项！”我永远无法显示这些名字。似乎 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)

垃圾邮件小写。 （对象和输入）