JSFiddle - React, Tailwind, and code Playground

HTML

<div class="widget__search">
  <div class="widget__search-container flex-cntr">
    <div class="area-container search-container ">
      <div class="search-input-wrp">

        <div class="widget__search-icon button-icon-i search-icon">
          <i class="las la-search"></i>
        </div>

        <input type="text" autocomplete="off" class="search-input area-input search-action search-auto area-active" data-stock-page="" data-stock-type="" placeholder="Фокус на инпут и нажмите стрелку вниз на клавиатуре">
        <div class="reset-search-value">
          <a href="javascript:void(0)" class="reset-search reset-search-button">
            <span class="reset-button-icon button-icon-i button-icon-right">
              <i class="las la-times"></i>
            </span>
          </a>
        </div>

      </div>
      <div class="area-content widget__content search-content animate__animated animate__lsFadeIn25 animate__faster" style="display: block;">
        <ul class="ls-custom-scrollbar select-list select-saerch-list search-list-content" data-auto-cmplt-type="search">


          <li class="select-items">
            <a href="javascript:void(0)" class="select-item select-search-item get_item_by_filter search-item area-closeable selectable-search-item" value="Samsung 1202" data-sort-value="Samsung 1202" data-sort="name">
              <span class="mark button-icon-i button-icon-left search-item-icon ">
                <i class="las la-search"></i>
              </span>
              <span class="widget__button-text">Samsung 1202</span>
              <span class="widget__mark"></span>
            </a>
          </li>



          <li class="select-items">
            <a href="javascript:void(0)" class="select-item select-search-item get_item_by_filter search-item area-closeable selectable-search-item" value="Sam B 350" data-sort-value="Sam B 350" data-sort="name">
              <span class="mark button-icon-i button-icon-left search-item-icon ">
                <i...

CSS

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

div {
    display: block;
}

span, p, label {
    line-height: 1.460;
}

img {
    width: 100%;
    height: 100%;
}

html, body {
    width: 100%;
    height: 100%;
}

input, select, textarea, button {
    font-family: inherit;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary_color);
    box-shadow: var(--input_focus_shadow) var(--blue_50);
    background: var(--white);
}

body {
    font-family: var(--primary_font), "Arial", sans-serif;
    background: #fafafa;
}

*:after, *:before {
    box-sizing: border-box;
}
.flex-cntr {
    display: flex;
    justify-content: center;
    align-items: center;
}
.search-container {
    width: 350px;
}
.search-input-wrp {
    height: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
}
.widget__search-icon {
    position: absolute;
    left: 14px;
    user-select: none;
}
.search-icon {
    pointer-events: none;
    color: #9696aa;
}
.button-icon-i {
    font-size: 21.200px;
    color: currentcolor;
    transition: .5s;
    display: inline-flex;
}
.search-input {
    display: flex;
    border-radius: 7px;
    outline: none;
    font-size: 16px;
    height: 39px;
    width: 100%;
    padding: 0 43px;
    font-weight: 500;
    color: #000;
    transition: .3s, border .4s ease-in;
    border: 2px solid #ccc;
    font-family: var(--font_montserrat);
    letter-spacing: .6px;
    background: var(--gray_50);
}
input, select, textarea, button {
    font-family: inherit;
}
.search-content {
    width: inherit;
}
.widget__content {
    display: none;
    position: absolute;
    z-index: 800;
    margin-top: 10px;
}
.select-list {
    max-height: 40vh;
    min-height: 70px;
    overflow: auto;
    max-width: 400px;
    min-width: 300px;
    background: #fff;
    border-radius: 7px;
    box-shadow: var(--shadow_medium)...

JavaScript

$(document).on('keydown keyup', '.search-auto', function(e){
  let keyCode = {
    'up': e.key == 'ArrowUp',
    'down': e.key == 'ArrowDown',
    'enter': e.key == 'Enter',
    'tab': e.key == 'Tab'
  };

  if(keyCode.up || keyCode.down || keyCode.enter || keyCode.tab) {
    e.preventDefault();

    if(e.type == 'keydown') {
      let el;
      let unselect;
  
      var list = $(this).closest('.search-container').find('.search-content').find('.search-list-content li');
      
      var modify_selected = 'selected';
      var selected = $('.selected');
      var children_element = $('.select-item');
  
      let get_selected_node = list.find(selected);

      if(keyCode.enter) {
        get_selected_node.trigger('click');
        $(this).blur();
      }

      unselect = get_selected_node.removeClass(modify_selected);
      ui_unselect_nav(unselect);
  
      if(keyCode.down || keyCode.tab) {
        if (selected.parent().next().length == 0) {
          el = list.first();
        } else {
          el = selected.parent().next();
        }
      }
  
      if(keyCode.up) {
        if(selected.parent().prev().length == 0) {
          el = list.last();
        } else {
          el = selected.parent().prev();
        }
      }
      
      if(el) {
        ui_select_nav(el.children(children_element));
      }   
    }    
  }
});

function ui_unselect_nav($this) {
  $this.removeClass('selected');
}

function ui_select_nav($this) {
  $this.addClass('selected');  
}