JSFiddle - React, Tailwind, and code Playground

by draditya91

HTML

<div class="ui-widget">
    <label for="tags">Tags:</label>
    <input id="tags"/>
</div>

CSS

.ui-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  display: none;
  min-width: 160px;
  _width: 160px;
  padding: 4px 0;
  margin: 2px 0 0 0;
  list-style: none;
  background-color: #ffffff;
  border-color: #ccc;
  border-color: rgba(0, 0, 0, 0.2);
  border-style: solid;
  border-width: 1px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
 
  .ui-menu-item > a.ui-corner-all {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #555555;
    white-space: nowrap;
 
    &.ui-state-hover, &.ui-state-active {
      color: #ffffff;
      text-decoration: none;
      background-color: #0088cc;
      border-radius: 0px;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      background-image: none;
    }
  }
}

JavaScript

var availableTags = [
    {'label': 'dog', 'value':1},
    { 'label' : 'cat' , 'value':2} ,
    {'label': 'ant', 'value':3},
    {'label': 'bat', 'value':4},
    {'label': 'deer', 'value':5},
    {'label': 'elephant', 'value':6},
    {'label': 'frog', 'value':7},
    {'label': 'giraffe', 'value':8},
    {'label': 'snake', 'value':9}
 ];

var select = false;

$("#tags").autocomplete({
    source: availableTags,
    autoFocus: true,
    selectFirst: true,
    open: function(event, ui) { if(select) select=false; },
    select: function(event, ui) {
        $('#tags').val(ui.item.label);
        select=true;
        return false;
    }
}).blur(function(){
    if(!select)
    {
        $("#tags").val($('ul.ui-autocomplete li:first a').text());
    }
});