JSFiddle - React, Tailwind, and code Playground

HTML

<div id="autocomplete-container">
  <input type="text" autofocus="true" name="autofocus sample" placeholder="search people" id="autocomplete-input" />
  <ul id="autocomplete-results">
  </ul>
</div>

CSS

ul {
  padding: 0;
  margin: 0;
}

li {
  max-width: 169px;
  padding: 1px 0px;
  list-style: none;
  -webkit-appearance: textfield;
  background-color: white;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  -webkit-rtl-ordering: logical;
  -webkit-user-select: text;
  cursor: auto;
  padding: 1px;
  border-width: 2px;
  border-style: inset;
  border-color: initial text-rendering: auto;
  color: initial;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: start;
  margin: 0em 0em 0em 0em;
  font: 13.3333px Arial;
}

.back {
  background: #eee;
}

JavaScript

// variables
  var input = document.querySelector('input');
  var people = ['john doe', 'maria', 'paul', 'george', 'jimmy', 'jimmmy', 'jimmmyyy', 'Andrew', 'Hendrie'];
  var indexCounter = 0;
  var results;
  var dir = 1;
  var nav=false;

  // functions
  function autocomplete(val) {
    var people_return = [];

    for (i = 0; i < people.length; i++) {
      if (val === people[i].slice(0, val.length)) {
        people_return.push(people[i]);
      }
    }

    return people_return;
  }

  // events
  input.onkeyup = function(e) {
    input_val = this.value; // updates the variable on each ocurrence

    if (input_val.length > 0) {
      var people_to_show = [];

      autocomplete_results = document.getElementById("autocomplete-results");
      autocomplete_results.innerHTML = '';
      people_to_show = autocomplete(input_val);

      for (i = 0; i < people_to_show.length; i++) {
        autocomplete_results.innerHTML += '<li>' + people_to_show[i] + '</li>';

      }
      autocomplete_results.style.display = 'block';

      if (e.keyCode == 40) {
       // alert(indexCounter);

        var childs = autocomplete_results.getElementsByTagName("li");

        if (!dir) {
          indexCounter = indexCounter + 1;
          if (indexCounter < (childs.length)) {
            for (i = 0; i < childs.length; i++) {
              childs[indexCounter].className = 'back';
              if (i != indexCounter) {
                childs[i].className = '';

              }



            }
          } else {

            indexCounter = 0;
            childs[indexCounter].className = 'back';
          }
          console.log(indexCounter);
        } else {
          if (indexCounter < (childs.length)) {
            for (i = 0; i < childs.length; i++) {
              childs[indexCounter].className = 'back';
              if (i != indexCounter) {
                childs[i].className = '';

              }



            }
          } else {

            indexCounter = 0;
          ...