JSFiddle - React, Tailwind, and code Playground

by tiagocarvalho

HTML

<label>Tags</label>
<input type="text" class="input_autocomplete">

CSS

ul.ui-autocomplete
{
  width: 200px;
  max-height: 120px;
  overflow: auto;
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
}

ul.ui-autocomplete li
{
  line-height:29px;
  height: 29px;
  min-width: 100%;
  border-bottom: 1px solid #FFFFFF;
  background:#dcdcdc;
}

ul.ui-autocomplete li:nth-child(2n+1)
{
  background:#ebebeb;
}

JavaScript

$(function() {
    var availableTags =
      ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", 
       "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", 
       "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", 
       "Scala", "Scheme", "cia cia", "bu bu", "ih ih ih"];

    var api;
    var autocomplete_init = false;

    $( ".input_autocomplete" ).autocomplete({
        source: availableTags,
        open: function(){
            if(!autocomplete_init){
                $('ul.ui-autocomplete').addClass('scroll-pane');
                api = $('.scroll-pane').jScrollPane().data('jsp');
                autocomplete_init = true;
            } else {
               api.reinitialise();
            }
        }
    });
});