JSFiddle - React, Tailwind, and code Playground

by Tim BĂĽthe

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css">
<div id="dialog" title="Basic dialog">
    <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.<br>
        <br>
        <input id="autocomplete1" /><button id="autocomplete1Browse">...</button>
    </p>
</div>

<button id="opener">Open Dialog</button>

<input id="autocomplete2" /><button id="autocomplete2Browse">...</button>

CSS

.ui-widget {
  font-size: 11px;
} 

ul.ui-autocomplete {
    width: 200px;;
}

JavaScript

$( "#dialog" ).dialog({
    autoOpen: false,
    show: "blind",
    hide: "explode",
    modal: true
});

$( "#opener" ).click(function() {
    $( "#dialog" ).dialog( "open" );
    return false;
});

var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $( "#autocomplete1, #autocomplete2" ).autocomplete({
            source: availableTags
        });


$( "#autocomplete1Browse" ).click(createBrowseSuggestions($('#autocomplete1')));
$( "#autocomplete2Browse" ).click(createBrowseSuggestions($('#autocomplete2')));

function createBrowseSuggestions(autocomplete){
    
    var $autcomplete = $(autocomplete);
    
    return function(){
        
        //alert('1: ' + $autcomplete.autocomplete("widget"))
    
        // close if already visible
        if ($autcomplete.autocomplete("widget").is(":visible")) {
          $autcomplete.autocomplete("close");
          return;
        }
    
        // Show all options
        $autcomplete.autocomplete("search", "a");
        $autcomplete.focus();
    }
}