JSFiddle - React, Tailwind, and code Playground

by salman

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css">
<div>No width specified for autocomplete<br/>
    <input id="Foo"/></div>
<div>A width of 400px specified for this autocomplete<br/>
    <input id="Bar"/></div>

CSS

div {
    font-family: monospace;
    margin-bottom: 20px;
}
input {
    font-family: monospace;
}

JavaScript

var blahBlah = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
    ];
$(document).ready(function() {
    $("input#Foo").autocomplete({
        source: blahBlah
    });
    $("input#Bar").autocomplete({
        source: blahBlah,
        open: function(event, ui) {
            $(this).autocomplete("widget").css({
                "width": 400
            });
        }
    });
});