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

jQuery UI & Autocomplete: Scrollable results

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

jQuery UI Autocomplete – Scrollable results

When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large.

Try typing “a” or “s” above to get a long list of results that you can scroll through.

&lt;!doctype html&gt;<br />
&lt;html lang='en'&gt;<br />
&lt;head&gt;<br />
    &lt;meta charset='utf-8'&gt;<br />
    &lt;title&gt;jQuery UI Autocomplete - Scrollable results&lt;/title&gt;<br />
    &lt;link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'&gt;<br />
    &lt;script src='//code.jquery.com/jquery-1.10.2.js'&gt;&lt;/script&gt;<br />
    &lt;script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'&gt;&lt;/script&gt;<br />
    &lt;link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'&gt;<br />
    &lt;style&gt;<br />
        .ui-autocomplete {<br />
            max-height: 100px;<br />
            overflow-y: auto;<br />
            /* prevent horizontal scrollbar */<br />
            overflow-x: hidden;<br />
        }</p>
<p>        /* IE 6 doesnt support max-height<br />
         * we use height instead, but this forces the menu to always be this tall<br />
         */<br />
        * html .ui-autocomplete {<br />
            height: 100px;<br />
        }<br />
    &lt;/style&gt;<br />
    &lt;script&gt;<br />
        $(function () {<br />
            var availableTags = [<br />
                'ActionScript',<br />
                'AppleScript',<br />
                'Asp',<br />
                'BASIC',<br />
                'C',<br />
                'C++',<br />
                'Clojure',<br />
                'COBOL',<br />
                'ColdFusion',<br />
                'Erlang',<br />
                'Fortran',<br />
                'Groovy',<br />
                'Haskell',<br />
                'Java',<br />
                'JavaScript',<br />
                'Lisp',<br />
                'Perl',<br />
                'PHP',<br />
                'Python',<br />
                'Ruby',<br />
                'Scala',<br />
                'Scheme'<br />
            ];<br />
            $('#tags').autocomplete({<br />
                source: availableTags<br />
            });<br />
        });<br />
    &lt;/script&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;</p>
<p>&lt;div class='ui-widget'&gt;<br />
    &lt;label for='tags'&gt;Tags: &lt;/label&gt;<br />
    &lt;input id='tags'&gt;<br />
&lt;/div&gt;</p>
<p>&lt;/body&gt;<br />
&lt;/html&gt;

Try The Code

jQuery UI & Autocomplete: Accent folding

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

jQuery UI Autocomplete – Accent folding

The autocomplete field uses a custom source option which will match results that have accented characters even when the text field doesn’t contain accented characters.

However if the you type in accented characters in the text field it is smart enough not to show results that aren’t accented.

Try typing “Jo” to see “John” and “Jörn”, then type “Jö” to see only “Jörn”.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Autocomplete - Accent folding</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 names = [ 'Jörn Zaefferer', 'Scott González', 'John Resig' ];

            var accentMap = {
                'á': 'a',
                'ö': 'o'
            };
            var normalize = function (term) {
                var ret = '';
                for (var i = 0; i < term.length; i++) {
                    ret += accentMap[ term.charAt(i) ] || term.charAt(i);
                }
                return ret;
            };

            $('#developer').autocomplete({
                source: function (request, response) {
                    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), 'i');
                    response($.grep(names, function (value) {
                        value = value.label || value.value || value;
                        return matcher.test(value) || matcher.test(normalize(value));
                    }));
                }
            });
        });
    </script>
</head>
<body>

<div class='ui-widget'>
    <form>
        <label for='developer'>Developer: </label>
        <input id='developer'>
    </form>
</div>

</body>
</html>
Try The Code

jQuery UI & Autocomplete: Combo box

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

jQuery UI Autocomplete – Combobox

A custom widget built by composition of Autocomplete and Button.

You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections.

The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.

This is not a supported or even complete widget. Its purely for demoing what autocomplete can do with a bit of customization.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Autocomplete - Combobox</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'>
    <style>
        .custom-combobox {
            position: relative;
            display: inline-block;
        }

        .custom-combobox-toggle {
            position: absolute;
            top: 0;
            bottom: 0;
            margin-left: -1px;
            padding: 0;
            /* support: IE7 */
            *height: 1.7em;
            *top: 0.1em;
        }

        .custom-combobox-input {
            margin: 0;
            padding: 0.3em;
        }
    </style>
    <script>
        (function ($) {
            $.widget('custom.combobox', {
                _create: function () {
                    this.wrapper = $('<span>')
                            .addClass('custom-combobox')
                            .insertAfter(this.element);

                    this.element.hide();
                    this._createAutocomplete();
                    this._createShowAllButton();
                },

                _createAutocomplete: function () {
                    var selected = this.element.children(':selected'),
                            value = selected.val() ? selected.text() : '';

                    this.input = $('<input>')
                            .appendTo(this.wrapper)
                            .val(value)
                            .attr('title', '')
                            .addClass('custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left')
                            .autocomplete({
                                delay: 0,
                                minLength: 0,
                                source: $.proxy(this, '_source')
                            })
                            .tooltip({
                                tooltipClass: 'ui-state-highlight'
                            });

                    this._on(this.input, {
                        autocompleteselect: function (event, ui) {
                            ui.item.option.selected = true;
                            this._trigger('select', event, {
                                item: ui.item.option
                            });
                        },

                        autocompletechange: '_removeIfInvalid'
                    });
                },

                _createShowAllButton: function () {
                    var input = this.input,
                            wasOpen = false;

                    $('<a>')
                            .attr('tabIndex', -1)
                            .attr('title', 'Show All Items')
                            .tooltip()
                            .appendTo(this.wrapper)
                            .button({
                                icons: {
                                    primary: 'ui-icon-triangle-1-s'
                                },
                                text: false
                            })
                            .removeClass('ui-corner-all')
                            .addClass('custom-combobox-toggle ui-corner-right')
                            .mousedown(function () {
                                wasOpen = input.autocomplete('widget').is(':visible');
                            })
                            .click(function () {
                                input.focus();

                                // Close if already visible
                                if (wasOpen) {
                                    return;
                                }

                                // Pass empty string as value to search for, displaying all results
                                input.autocomplete('search', '');
                            });
                },

                _source: function (request, response) {
                    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), 'i');
                    response(this.element.children('option').map(function () {
                        var text = $(this).text();
                        if (this.value && ( !request.term || matcher.test(text) ))
                            return {
                                label: text,
                                value: text,
                                option: this
                            };
                    }));
                },

                _removeIfInvalid: function (event, ui) {

                    // Selected an item, nothing to do
                    if (ui.item) {
                        return;
                    }

                    // Search for a match (case-insensitive)
                    var value = this.input.val(),
                            valueLowerCase = value.toLowerCase(),
                            valid = false;
                    this.element.children('option').each(function () {
                        if ($(this).text().toLowerCase() === valueLowerCase) {
                            this.selected = valid = true;
                            return false;
                        }
                    });

                    // Found a match, nothing to do
                    if (valid) {
                        return;
                    }

                    // Remove invalid value
                    this.input
                            .val('')
                            .attr('title', value + ' didnt match any item')
                            .tooltip('open');
                    this.element.val('');
                    this._delay(function () {
                        this.input.tooltip('close').attr('title', '');
                    }, 2500);
                    this.input.data('ui-autocomplete').term = '';
                },

                _destroy: function () {
                    this.wrapper.remove();
                    this.element.show();
                }
            });
        })(jQuery);

        $(function () {
            $('#combobox').combobox();
            $('#toggle').click(function () {
                $('#combobox').toggle();
            });
        });
    </script>
</head>
<body>

<div class='ui-widget'>
    <label>Your preferred programming language: </label>
    <select id='combobox'>
        <option value=''>Select one...</option>
        <option value='ActionScript'>ActionScript</option>
        <option value='AppleScript'>AppleScript</option>
        <option value='Asp'>Asp</option>
        <option value='BASIC'>BASIC</option>
        <option value='C'>C</option>
        <option value='C++'>C++</option>
        <option value='Clojure'>Clojure</option>
        <option value='COBOL'>COBOL</option>
        <option value='ColdFusion'>ColdFusion</option>
        <option value='Erlang'>Erlang</option>
        <option value='Fortran'>Fortran</option>
        <option value='Groovy'>Groovy</option>
        <option value='Haskell'>Haskell</option>
        <option value='Java'>Java</option>
        <option value='JavaScript'>JavaScript</option>
        <option value='Lisp'>Lisp</option>
        <option value='Perl'>Perl</option>
        <option value='PHP'>PHP</option>
        <option value='Python'>Python</option>
        <option value='Ruby'>Ruby</option>
        <option value='Scala'>Scala</option>
        <option value='Scheme'>Scheme</option>
    </select>
</div>
<button id='toggle'>Show underlying select</button>


</body>
</html>
Try The Code

jQuery UI & Autocomplete: Categories

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

jQuery UI Autocomplete – Categories

A categorized search result. Try typing “a” or “n”.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Autocomplete - Categories</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'>
    <style>
        .ui-autocomplete-category {
            font-weight: bold;
            padding: .2em .4em;
            margin: .8em 0 .2em;
            line-height: 1.5;
        }
    </style>
    <script>
        $.widget('custom.catcomplete', $.ui.autocomplete, {
            _renderMenu: function (ul, items) {
                var that = this,
                        currentCategory = '';
                $.each(items, function (index, item) {
                    if (item.category != currentCategory) {
                        ul.append("<li class='ui-autocomplete-category'>" + item.category + '</li>');
                        currentCategory = item.category;
                    }
                    that._renderItemData(ul, item);
                });
            }
        });
    </script>
    <script>
        $(function () {
            var data = [
                { label: 'anders', category: '' },
                { label: 'andreas', category: '' },
                { label: 'antal', category: '' },
                { label: 'annhhx10', category: 'Products' },
                { label: 'annk K12', category: 'Products' },
                { label: 'annttop C13', category: 'Products' },
                { label: 'anders andersson', category: 'People' },
                { label: 'andreas andersson', category: 'People' },
                { label: 'andreas johnson', category: 'People' }
            ];

            $('#search').catcomplete({
                delay: 0,
                source: data
            });
        });
    </script>
</head>
<body>

<label for='search'>Search: </label>
<input id='search'>

</body>
</html>
Try The Code