JSFiddle - React, Tailwind, and code Playground

by John Grivas

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<label for="tags">Tags: </label>
<input id="tags" type="text" class="custom-combobox" value="">

CSS

.custom-combobox {
  position: relative;
  display: inline-block;
  border-style: solid;
  border-width: 1px;
}
.custom-combobox-toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-left: -1px;
  padding: 0;
}
.custom-combobox-input {
  margin: 0;
  padding: 5px 10px;		
}

/*
.custom-combobox-list-item {
  color: blue;
  font-weight: bold;
}
.custom-combobox-input , .custom-combobox-list-item.ui-state-focus {
  color: black;
  font-weight: bold;
  font-style: italic;
}
*/

#tags {
  width: 40px;
}

JavaScript

$(function () {
  var availableTags = new Array(1000000);
  var j = 0;
  for (var i = 1; i < availableTags.length; i++) {
    availableTags[j++] = i.toString();
  }
  $("#tags").autocomplete({
    source: function (req, responseFn) {

      var re = req.term;
      var matcher = new RegExp("^" + re, "i");
      var a = $.grep(availableTags, function (item) {
        return matcher.test(item);
      });
      responseFn(a.slice(0, 5));
    },
    select: function (event, ui) {
      if (ui.item && ui.item.value) {
        var titleinput = ui.item.value;
        ui.item.value = $.trim(titleinput);
        alert(ui.item.value);
      }
    },
    change: function (event, ui) {
      if (!valid) {
        // remove invalid value, as it didn't match anything
        $(this).val("");
        select.val("");
        return false;
      }
    }

  });
});