JSFiddle - React, Tailwind, and code Playground

by Gareth Bradley

HTML

<form>
    <input type="text" size="30" id="livesearchinput">
    <div id="livesearchesults" style="border: 1px solid rgb(165, 172,  178); ">
    </div>
</form>

CSS

a:hover, a:active {
color: 
red;
background-color: 
transparent;
}
#livesearchresults {
margin: 0px;
width: 194px;
}

.color-change{
    color:red;
}

JavaScript

$(document).ready(function() {
    var $input = $("#livesearchinput"),
        filled = false;
    $.ajaxSetup({
        cache: false
    });
    $input.keydown(function(key) {
        if (!filled) {
            filled = true;
            $.getJSON("/gh/get/response.json//garfbradaz/MvcLiveSearch/tree/master/JSFiddleAjaxReponses/", function(JSONData) {
                var $ul =
                $('<ul>').attr({
                    id: "live-list"
                }).appendTo('div#livesearchesults');
                $.each(JSONData, function(i, item) {
                    $.each(item, function(j, val) {
                        $('<li>').attr({
                            id: "live-" + val
                        }).append(val).appendTo($ul);
                    });
                });
            });
        }

        var n = $("li:contains('" + this.value + "')").length;

        if (n === 0) {
            $("li").removeClass("color-change");
            console.log("1. value of n equals " + n + " : " + this.value);
        }
        else {
            $("li:contains('" + this.value + "')").addClass("color-change");
            console.log("2. value of n equals " + n + " : " + this.value);
        }

    });

});