JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div id="discus_search">
    <div id="discus_search_cat">
        <div id="discus_search_cat_0" onclick="selects.set(0);">Искать везде</div>
        <div id="discus_search_cat_3" onclick="selects.set(3);">Поблагодарить</div>
        <div id="discus_search_cat_1" onclick="selects.set(1);">Предложить идею</div>
        <div id="discus_search_cat_4" onclick="selects.set(4);">Задать вопрос</div>
        <div id="discus_search_cat_2" onclick="selects.set(2);">Сообщить о проблеме</div>
        <div id="discus_search_cat_5" onclick="selects.set(5);">Заказы</div>
    </div>
    <input id="discus_search_input" type="text" placeholder="Search...">
</div>

CSS

.active {
    color:red
}

JavaScript

selects = {
    els: new Array,
    set: function (id) {
        var pos = this.els.indexOf(id);
        if (pos == -1) {
            if (id == 0) {
                selects.els = new Array;
                $("#discus_search_cat div").removeClass("active");
            } else if (id != 0) {
                var theClass = $("#discus_search_cat_0").attr("class");
                if (theClass == "active") {
                    this.els.splice(0, 1);
                    $("#discus_search_cat_0").removeClass("active");
                }

            }
            this.els[this.els.length] = id;
            $("#discus_search_cat_" + id).addClass("active");
        } else {
            this.els.splice(pos, 1);
            $("#discus_search_cat_" + id).removeClass("active");
        }
    }
};

var discus_search_delay = false;
var discus_search_value = '';

function FastSearch() {

    $("#discus_search_input").attr("autocomplete", "off");
    $("#discus_search_input").blur(function () {
        $("#searchsuggestions").fadeOut();
    });

    $("#discus_search_input").keyup(

    function () {
        var inputString = $(this).val();

        if (inputString.length == 0) {
            $("#searchsuggestions").fadeOut();
        } else {

            if (discus_search_value != inputString && inputString.length > 3) {
                clearInterval(discus_search_delay);
                discus_search_delay = setInterval(function () {
                    discus_do_search(inputString);
                }, 600);
            }

        }

    });
}

function discus_do_search(inputString) {

    clearInterval(discus_search_delay);

    $("#searchsuggestions").remove();

    $("body").append("<div id='searchsuggestions' class='box' style='display:none;margin-top:5px;width:350px;'></div>");

    /*$.post('engine/ajax/discus/discus_inc.php', {
        query: inputString,
        action: "fastsearchcomm"
    }, function (data) {

       ...