JSFiddle - React, Tailwind, and code Playground

by subhash9

HTML

<input id="txtSearch" type="text"/>
    <div id="divSearchContent" style="height: 80px; width:30%; overflow: scroll;">
    <ul id="ulSearch" class="buttons" style="font-size: 12px;">
    <li>Compt0003</li>
    <li>Compt0004</li>
    <li>Compt0005</li>
    <li>Compt0006</li>
    <li>Compt0007</li>
    <li>Compt0008</li>
    <li>Compt0009</li>
    <li>Compt0010</li>
    <li>Compt0011</li>
    </ul></div>

JavaScript

var liPossition=0;
$("#txtSearch").keydown(function (e) {
        if (e.keyCode == 40) { // down arrow key code 
            if (liPossition < 1 && liPossition <= $("#ulSearch li").length) {
                $("#ulSearch li:eq(" + (liPossition-1) + ")").css("background-color", "");$("#ulSearch li:eq(" + liPossition + ")").css("background-color", "red");
                liPossition++;
            }
            else {
                $("#ulSearch li:eq(" + (liPossition-1) + ")").css("background-color", "");
                $("#ulSearch li:eq(" + liPossition + ")").css("background-color", "red");
                liPossition++;
            }
        }
        if (e.keyCode == 38) { // up arrow key code        
            if (liPossition >= 1) {
                $("#ulSearch li:eq(" + (liPossition+1) + ")").css("background-color", "");
                $("#ulSearch li:eq(" + liPossition + ")").css("background-color", "red");
                liPossition--;
            }
            else
            {$("#ulSearch li:eq(" + (liPossition+1) + ")").css("background-color", "");
                $("#ulSearch li:eq(" + liPossition + ")").css("background-color", "red");
            }}
        if (e.keyCode == 13) {
            if (liPossition >= 1) {
                $("#txtSearch").val($("#ulSearch li:eq(" + liPossition + ")").text());
                $("#divSearchContent").hide();
            }
        }
     });