datalist autocomplete

Using a datalist with autocplete

by Corey Frang

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/vader/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>
<input id="test" datalist="conditions" multiple />
<datalist id="conditions">
    <option title="testing">ActionScript</option>
    <option>AppleScript</option>
    <option>Asp</option>
    <option>BASIC</option>
    <option>C</option>
    <option>C++</option>
    <option>Clojure</option>
    <option>COBOL</option>
    <option>ColdFusion</option>
    <option>Erlang</option>
    <option>Fortran</option>
    <option>Groovy</option>
    <option>Haskell</option>
    <option>Java</option>
    <option>JavaScript</option>
    <option>Lisp</option>
    <option>Perl</option>
    <option>PHP</option>
    <option>Python</option>
    <option>Ruby</option>
    <option>Scala</option>
    <option>Scheme</option>
</datalist>

JavaScript

$('input:text[datalist][multiple]').each(function() {
    var elem = $(this),
        list = $(document.getElementById(elem.attr('datalist')));
    elem.autocomplete({
        source: list.children().map(function() {
            return $(this).text();
        }).get()
    });
});