JSFiddle - React, Tailwind, and code Playground

by sunflowersh

HTML

<input id="searchField" type="text" placeholder="Find a Player">
<div class="append"></div>

JavaScript

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!");
            }
        }
    }
}); // searchField on