JSFiddle - React, Tailwind, and code Playground

by Pankaj Singh Sugara

HTML

<input type="text" class="" id="my_name" value="" placeholder="Enter Name" autocomplete="off"/>
<ul class="services" id="auto_my_name">
                   
</ul>

CSS

#auto_my_name
{
    border:1px solid #cccccc;
    width:auto;
    font-family:verdana, arial, helvetica, sans-serif;
    font-size:15px;
    height:auto;
    margin-top:0px;
    list-style:none;
    position: absolute;   /*display:none;*/
    padding: 0;
    background-color: #EAEAEA;
    z-index:1;
    box-shadow:6px 6px 8px #cccccc;
}

#auto_my_name li
{
    height:25px;
}

#my_name
{
    width:100px;
}

.services li.selected{
    background-color:#636060;
    color:#ffffff;
}

JavaScript

var my_name = ["Albert","Allen","Aladin","Nilesh","Dharmesh","Aakesh","Pankaj","Vijay","Manoj","Zahir","Mukesh","Kishor","Sachin","Rakesh"];
//Values for autocomplete list

$(document).ready(function(){

$("#my_name").unbind('keyup').keyup(function(e){
       
            if(e.keyCode == 13)
            {// Enter
                if ($(".services").is(":visible"))
                {
           
                    my_value = $(".selected").attr('id');
                    var my_id = $(".selected").attr("value");
                        $( "#my_name" ).val(my_value);
                    $(".services").empty();
                    $("#auto_my_name").slideUp();
                   
                }
                else
                {
                        $(".services").show();
                }
             }
       
            else if(e.keyCode == 38)
            { // up

                var selected = $(".selected");
                $(".services li").removeClass("selected");
                // if there is no element before the selected one, we select the last one
                if (selected.prev().length == 0)
                {
                    var child = selected.siblings().length + 1;
                $(".services li:nth-child("+child+")" ).addClass("selected");
                }
                else
                { // otherwise we just select the next one
                selected.prev().addClass("selected");
                }
            }
       
            else if(e.keyCode == 40)
            { // down
                var selected = $(".selected");
                $(".services li").removeClass("selected");
                if (selected.next().length == 0)
                {
                    $(".services li:nth-child(1)" ).addClass("selected");
                }
                else
                {
                    selected.next().addClass("selected");
                }
              }
             
              else
              {
        ...