jQuery UI Autocomplete – Page 2

<!doctype html> <html lang='en'> <head> <meta charset='utf-8'> <title>jQuery UI Autocomplete - Multiple values</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' ]; function split(val) { return val.split(/,\s*/); } function extractLast(term) { return split(term).pop(); } $('#tags') // dont navigate away from the field on tab when selecting an item .bind('keydown', function (event) { if (event.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active) { event.preventDefault(); } }) .autocomplete({ minLength: 0, source: function (request, response) { // delegate back to autocomplete, but extract the last term response($.ui.autocomplete.filter( availableTags, extractLast(request.term))); }, focus: function () { // prevent value inserted on focus return false; }, select: function (event, ui) { var terms = split(this.value); // remove the current input terms.pop(); // add the selected item terms.push(ui.item.value); // add placeholder to get the comma-and-space at the end terms.push(''); this.value = terms.join(', '); return false; } }); }); </script> </head> <body> <div class='ui-widget'> <label for='tags'>Tag programming languages: </label> <input id='tags' size='50'> </div> </body> </html>

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

jQuery UI Autocomplete – Custom data and display

You can use your own custom data formats and displays by simply overriding the default focus and select actions.

Try typing “j” to get a list of projects or just press the down arrow.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Autocomplete - Custom data and display</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>
        #project-label {
            display: block;
            font-weight: bold;
            margin-bottom: 1em;
        }

        #project-icon {
            float: left;
            height: 32px;
            width: 32px;
        }

        #project-description {
            margin: 0;
            padding: 0;
        }
    </style>
    <script>
        $(function () {
            var projects = [
                {
                    value: 'jquery',
                    label: 'jQuery',
                    desc: 'the write less, do more, JavaScript library',
                    icon: 'jquery_32x32.png'
                },
                {
                    value: 'jquery-ui',
                    label: 'jQuery UI',
                    desc: 'the official user interface library for jQuery',
                    icon: 'jqueryui_32x32.png'
                },
                {
                    value: 'sizzlejs',
                    label: 'Sizzle JS',
                    desc: 'a pure-JavaScript CSS selector engine',
                    icon: 'sizzlejs_32x32.png'
                }
            ];

            $('#project').autocomplete({
                minLength: 0,
                source: projects,
                focus: function (event, ui) {
                    $('#project').val(ui.item.label);
                    return false;
                },
                select: function (event, ui) {
                    $('#project').val(ui.item.label);
                    $('#project-id').val(ui.item.value);
                    $('#project-description').html(ui.item.desc);
                    $('#project-icon').attr('src', 'images/' + ui.item.icon);

                    return false;
                }
            })
                    .data('ui-autocomplete')._renderItem = function (ul, item) {
                return $('<li>')
                        .append('<a>' + item.label + '<br>' + item.desc + '</a>')
                        .appendTo(ul);
            };
        });
    </script>
</head>
<body>

<div id='project-label'>Select a project (type 'j' for a start):</div>
<img id='project-icon' src='http://jqueryui.com/resources/demos/autocomplete/images/transparent_1x1.png'
     class='ui-state-default' alt=''>
<input id='project'>
<input type='hidden' id='project-id'>

<p id='project-description'></p>

</body>
</html>

Try The Code

Series: jQuery UI Autocomplete

jQuery UI & Autocomplete: Multiple entries with values