JSFiddle - React, Tailwind, and code Playground

by alnitak

HTML

<div id="main">
    <input type="text" class="table-search" id="search" autocomplete="off"   placeholder="Search Clients..." /><table class="table" id="tblData">
<thead><tr><th>Name</th> <th>Title</th></tr></thead>
<tbody id="tblDataBody">
<tr><td><a href="http://lar.loc/cases">Scott</a></td> <td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Billy</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">George</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Sara</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">John</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Megan</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Ben</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Jully</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Bethany</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Alen</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Jane</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Alice</a></td><td>Client</td></tr></tbody></table>
</div>

CSS

.active {
    background-color: yellow;
}

JavaScript

$(document).ready(function(){
    $("#main").on("keydown", "#search", hoverDown);
});

function hoverDown(e) {
    var $tbl = $('#tblDataBody');
    var $cur = $('.active', $tbl).removeClass('active').first();
    
    if (e.keyCode === 40) { //down
        if ($cur.length) {
            $cur.next().addClass('active');
        } else {
            $tbl.children().first().addClass('active');
        }
    } else if (e.keyCode == 38) { //up
        if ($cur.length) {
            $cur.prev().addClass('active');
        } else {
            $tbl.children().last().addClass('active');
        }
    } else if (e.keyCode == 13) {
        if ($cur.length) {
            window.location = $cur.find("a").attr("href");
        }
    }
}