JSFiddle - React, Tailwind, and code Playground

by andrewwhitaker

HTML

<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<ol>
    <li>Type "ac" to get "ActionScript" in the suggestion list.</li>
    <li>Press the "DOWN" arrow to focus on the item and populate the input</li>
    <li>Move your mouse over the "ActionScript" suggestion</li>
    <li>The input's value will NOT be reset to "ac"</li>
    </ol>

<input type="text" id="auto" />

CSS

ol { margin-left: 30px; list-style-type: decimal; }

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"
        ];

    $("#auto").autocomplete({
        source: availableTags
    });
});