JSFiddle - React, Tailwind, and code Playground

by Pratik Bhonsle

HTML

<form>
    <input type="text" name="locKeySearch" id="locKeySearch" value="" />
</form>
<div id="locDropDown">
    <a href="1">1</a>
    <a href="2">2</a>
    <a href="3">3</a>
    <a href="4">4</a>
    <a href="5">5</a>
    <a href="6">6</a>
    <a href="7">7</a>
    <a href="8">8</a>
    <a href="9">9</a>
    <a href="10">10</a>
</div>

CSS

div {width:300px;}
a{display:block;}
a:hover{background:#ccc;}

JavaScript

$(document).ready(function() {
    var keyindex, alinks;
    keyindex = -1;
    // Key Events
    $('#locKeySearch').keydown(function(e) {
        alinks = $('#locDropDown').find('a');
        if (alinks.length === 0) {
            keyindex = -1;
        }
        if (e.keyCode == 40) {
            e.preventDefault();
            if (alinks.length > 0 && keyindex == -1) {
                keyindex = 0;
                $('#locDropDown').find('a')[keyindex++].focus();
            }
        }
    });

    $('#locDropDown').keydown(function(e) {
        alinks = $('#locDropDown').find('a');
        if (e.keyCode == 40) {
            e.preventDefault();
            if (keyindex == -1) {
                keyindex = 1;
            }
            if (alinks.length > 0 && keyindex < alinks.length) {
                $('#locDropDown').find('a')[keyindex++].focus();
            }
        }
        if (e.keyCode == 38) {
            e.preventDefault();
            if (keyindex == alinks.length) {
                keyindex = keyindex - 2;
            }

            if (alinks.length > 0 && keyindex < alinks.length && keyindex >= 0) {
                $('#locDropDown').find('a')[keyindex--].focus();
            }
        }
    });
});