JSFiddle - React, Tailwind, and code Playground

by bmarsh123

HTML

<input type="text" id="inp1" />

CSS

.inputContainer {}

.list {
  list-style: none;
}

.listitem {}

.container {
  border: 1px solid #CCC;
  border-top: 0;
  position: absolute;
  max-height: 200px;
}

.resultslist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.results {
  padding: 3px;
}

.results:hover {
  background-color: lightblue;
}

.highlight {
  text-decoration: underline;
  font-weight: bold;
}

JavaScript

(function($) {
  var states = [{
      'name': 'Alabama'
    },
    {
      'name': 'Alaska'
    },
    {
      'name': 'Arizona'
    },
    {
      'name': 'Arkansas'
    },
    {
      'name': 'California'
    },
    {
      'name': 'Colorado'
    }
  ];

  $.autocompleter = function(obj, options) {
    this.init(obj, options);
  };
  $.extend($.autocompleter.prototype, {
    defaults: {
      autofill: true
    },
    input: null,
    inputContainer: null,
    list: null,
    lastKeyPressed: null,
    prev: null,
    isActive: false,
    init: function(obj, options) {
      this.defaults = $.extend(true, {}, this.defaults, options);
      this.input = $(obj);

      this.createInputContainer();
      this.createContainer();
      this.bindEvents();
    },
    createInputContainer: function() {
      this.inputContainer = $('<div/>')
        .css('width', this.input.outerWidth())
        .insertAfter(this.input);
      var $ul = $('<ul/>')
        .addClass('list');
      this.inputContainer.append($ul);
      var $li = $('<li/>')
        .css('width', this.input.outerWidth());
      $ul.append($li);
      $li.append(this.input);
    },
    createContainer: function() {
      var self = this;

      this.container = $('<div/>')
        .addClass('container')
        .css('width', this.input.outerWidth())
        .appendTo($('body'));
      this.list = $('<ul/>')
        .addClass('resultslist')
        .appendTo(this.container);
      for (var i = 0; i < states.length; i++) {
        var $li = $('<li/>')
          .addClass('results')
          .appendTo(this.list);
        $li.on('click', function(e) {
          self.makeSelection(this, e);
        });
        var $label = $('<label/>')
          .text(states[i].name)
          .appendTo($li);
      }
      if (this.container.is(':visible')) {
        this.close();
      }
    },
    bindEvents: function() {
      var self = this;

      this.input.on('click focus', function() {
        if...