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'>
    <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='http://codecrawl.com/code/jqueryui/jqueryui_style.css'>
        $(function () {
            var availableTags = [
                source: availableTags

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

Try The Code
Series Navigation
jQuery UI & Autocomplete: Scrollable results >>

Leave a comment

Leave a Reply