JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<div class="ui-widget">
  <label for="tags">Tags: </label>
    <input id="tags" />
    <input type="button" id="btn" value="Click Me" />
</div>

JavaScript

var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

    $("#tags").autocomplete({
        source: availableTags,
        minLength:0,
        select:function( event, ui ) {
            alert(ui.item.value + " aka " + ui.item.id);
        }
    });

$("#btn").on("click",function(){
    $("#tags").autocomplete("search", ""); 
    $("#tags").autocomplete("select", function( event, ui ) {
        alert(ui.item.value + " aka " + ui.item.id);
      }); 
});

$(document).on('click', function(e){ 
    var target = $(e.target);
    if(target.attr("id") != "tags" && target.attr("id") != "btn")
    {
        $('#tags').autocomplete('close');
        
    }
});