jQuery UI & Autocomplete: Basic functionality

This entry is part 1 of 7 in the series jQuery UI Autocomplete

jQuery UI Autocomplete – Default functionality

The Autocomplete widgets provides suggestions while you type into the field.

Here the suggestions are tags for programming languages, give “ja” (for Java or JavaScript) a try.

The datasource is a simple JavaScript array, provided to the widget using the source-option.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(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'
            ];
            $('#tags').autocomplete({
                source: availableTags
            });
        });
    </script>
</head>
<body>

<div class='ui-widget'>
    <label for='tags'>Tags: </label>
    <input id='tags'>
</div>

</body>
</html>
Try The Code
Series Navigation
jQuery UI & Autocomplete: Scrollable results >>