JSFiddle - React, Tailwind, and code Playground

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.keyup(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).hide();
                    });
                });
            });
        }

        var n = 0;

        if (this.value !== "") {
            n = $("li:contains('" + this.value + "')").length;
            n2 = $("li[id^='live']:contains('" + this.value + "')").length;
            console.log("1. value of n2 equals " + n2 + " : " + this.value + "end");


        }
        else {
            n = 0;
        }

        if (n <= 0) {
            $('li[id ^= "live"]').hide("slow");
            console.log("1. value of n equals " + n + " : " + this.value + "end");
        }

        if (n > 0) {
            $("li[id^='live'] li:contains('" + this.value + "')").show();
            console.log("2. value of n equals " + n + " : " + this.value + "end");
        }


    });

});