jQueryUI 1.8.14 Autocomplete

by andrewwhitaker

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/black-tie/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 be reset to "ac"</li>
    </ol>

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

CSS

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

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

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