JSFiddle - React, Tailwind, and code Playground

HTML

Country: <div class="input-with-autocomplete">
<div class="input-box" contenteditable="true" spellcheck="false"></div>
</div>

CSS

.input-with-autocomplete {
  display: inline;
  position: relative;
}
.input-box {
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
  cursor: text;
}
span.autocomplete {
  display: inline-block;
  color: #969696;
  cursor: text;
  width: 300px;
  white-space: pre;
}

* { box-sizing: border-box; }
body {
  font: 16px Arial;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}
.suggest-fragment {
  font-weight: bold;
}
.suggest-rest {
}

JavaScript

function getSelectionStartEnd(element) {
  var start = 0;
  var end = 0;
  var doc = element.ownerDocument || element.document;
  var win = doc.defaultView || doc.parentWindow;
  var sel;
  if (typeof win.getSelection != "undefined") {
    sel = win.getSelection();
    if (sel.rangeCount > 0) {
      var range = win.getSelection().getRangeAt(0);
      var preCaretRange = range.cloneRange();
      preCaretRange.selectNodeContents(element);
      preCaretRange.setEnd(range.startContainer, range.startOffset);
      start = preCaretRange.toString().length;
      preCaretRange.setEnd(range.endContainer, range.endOffset);
      end = preCaretRange.toString().length;
    }
  } else if ( (sel = doc.selection) && sel.type != "Control") {
    var textRange = sel.createRange();
    var preCaretTextRange = doc.body.createTextRange();
    preCaretTextRange.moveToElementText(element);
    preCaretTextRange.setEndPoint("EndToStart", textRange);
    start = preCaretTextRange.text.length;
    preCaretTextRange.setEndPoint("EndToEnd", textRange);
    end = preCaretTextRange.text.length;
  }
  return { start: start, end: end };
}
  
function autocomplete(input, arr) {
  var currentFocus = -1;
  var graySpan;
  var suggestionList;
  var suggestionDiv;
  
  input.on("input", function() {
    hideSuggestions();
    showSuggestions();
  });
  
  input.on("keydown", function(e) {
    if (e.keyCode == 40) {
      // ArrowDown
  		e.preventDefault();
      scrollDown();
    } else if (e.keyCode == 38) {
      // ArrowUp
  		e.preventDefault();
      scrollUp();
    } else if (e.keyCode == 13 || e.keyCode == 9) {
      // Enter or Tab
      e.preventDefault();
      selectSuggestion();
    } else if (e.keyCode == 39) {
      // ArrowRight
      if (getSelectionStartEnd(input[0]).start == getText().length) {
        e.preventDefault();
        selectSuggestion();
      }
    } else if (e.keyCode == 27) {
      // Escape
      hideSuggestions();
    }
  });
  
  $(document).click(function...