0

I have looked at Display partial array value matches from user input and tried to achieve the same results.

The difference is the array format. I want the search text value to match the array key, name.

No matter what I type in the text field, it displays "no match found!" and I can never display the names. It seems players[x].name.indexOf() is not recognized. How can I display names?

Here is 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!");
             }
        }
    }
});
Community
  • 1
  • 1
user2326737
  • 211
  • 1
  • 4
  • 16

1 Answers1

1

Update Fiddle

You are overriding all search results at first negative search. Because you append append results, at first not found you kill all the appended children with .html() instruction. It was just that mistake. I'm not sure about your toLowerCase use, but this is another story.

    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

To have the search completely case insensitive:

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

Spam lowercase around. ( to the object and to the input )

AndreaBogazzi
  • 14,323
  • 3
  • 38
  • 63
  • Thank you for the quick answer and the clear explanation! This is what I needed. toLowerCase is used to make the search term non case sensitive. – user2326737 Dec 05 '14 at 17:28
  • I commented too early. The first letter in the text field brings up the search results nicely. However, after the second letter, it shows "no match found!" unless I type in exactly the same as the array value. How can I make it completely non case sensitive? – user2326737 Dec 05 '14 at 17:36
  • Edited the answer to fit best. Just add more lowercase. And consider indexOf returning 0 or "> 0" to search inside the name. – AndreaBogazzi Dec 05 '14 at 17:40