JSFiddle - React, Tailwind, and code Playground

by kritya

HTML

<script src="http://oscargodson.com/labs/jkey/jquery.jkey-1.2.js"></script>
<input type="text" id="main" />
<div id="bottom-div">
    <ol>
        <li id="1">Content1</li>
        <li id="2">Content2</li>
        <li id="3">Content3</li>
        <li id="4">Content4</li>
        <li id="5">Content5</li>
        <li id="6">Content6</li>
        <li id="7">Content7</li>
        <li id="8">Content8</li>
        <li id="9">Content9</li>
        <li id="10">Content10</li>
        <li id="11">Content11</li>
        <li id="12">Content12</li>
        <li id="13">Content13</li>
        <li id="14">Kritya</li>
    </ol>
</div>
<div id="apparent-div">Apparent div</div>
ContentContent Conetent<br />
ContentContent Conetent<br />
ContentContent Conetent<br />
ContentContent Conetent<br />
ContentContent Conetent<br />
ContentContent Conetent<br />
ContentContent Conetent<br />
ContentContent Conetent<br />
<div id="key"></div>
<div id="logger">con</div>

CSS

#bottom-div,#apparent-div {
    z-index:999;
    position:absolute;
    
    background:black;
    border:1px solid #ccc;
    color:white;
    display:none;
}
.virtual
{
    background:red;
    color:white;
}
.contspan {
    font-size:small;
    z-index:1;
    background:#900
}
.cont{
    background:#F00;
    display:inline-block;
}
span.highlight
{
    color:red;
    background:cyan;
    height:0.7em;
    padding:0px;
}

JavaScript

jQuery.expr[':'].Contains = function(a, i, m) {
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
var checker = 0,
    count = -1,
    lastid = 0,
    curid = 0;
var added = [];
added[1] = "oo"
var selec;
$("#bottom-div").hide()
$("#main").keyup(function(e) {
    if (e.keyCode != 40 && e.keyCode != 38) {
        count = -1;
        var tar = $("li:Contains('" + $("#main").val() + "')").slice(0, 5)
        $(tar).each(function() {
            var temp = 0;
            if ($(this).hasClass("virtual")) {
                count = temp - 1;
            }
            $(this).removeClass("virtual")
            temp++;
        });

    }
    $("li").each(function() {
        if (this.getAttribute("original-text")) this.innerHTML = this.getAttribute("original-text");
    })
    check();
});
$("#main").focus(function() {
    check();
    added.push("xyz");
    for (i in added) {
        $("#logger").html(added[i]);

    }
});
$("#main").blur(function() {
    $("#bottom-div").hide();
    $("#apparent-div").hide();
});
$('#main').jkey('down', function() {
    selec = $("li:Contains('" + $("#main").val() + "')").slice(0, 5);
    if (count > 5 || count > selec.size() - 1) {
        count = -1;
    }
    if (checker) {
        selec.eq(count).removeClass("virtual");
        count++;
        lastid = selec.eq(count).attr('id')
        curid = selec.eq(count).attr('id');
        selec.eq(count).addClass("virtual");
    }
});

$('#main').jkey('up', function() {
    selec = $("li:Contains('" + $("#main").val() + "')").slice(0, 5);
    if (count <= -1 || count > selec.size() - 1) {
        count = 5;
    }
    if (checker) {
        selec.eq(count).removeClass("virtual");
        count--;
        lastid = selec.eq(count).attr('id')
        curid = selec.eq(count).attr('id');
        selec.eq(count).addClass("virtual");
    }
});

$("#main").jkey("enter", function() {
    if (lastid > 0) {
        var to = $("#" + lastid).text();
       ...