jQuery UI & Autocomplete: Multiple entries with values

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

jQuery UI Autocomplete – Multiple values

Usage: Type something, eg. “j” to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.

This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.

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

            function split(val) {
                return val.split(/,\s*/);

            function extractLast(term) {
                return split(term).pop();

                // 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) {
                        minLength: 0,
                        source: function (request, response) {
                            // delegate back to autocomplete, but extract the last term
                                    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
                            // add the selected item
                            // add placeholder to get the comma-and-space at the end
                            this.value = terms.join(', ');
                            return false;

<div class='ui-widget'>
    <label for='tags'>Tag programming languages: </label>
    <input id='tags' size='50'>

Try The Code
Series Navigation<< jQuery UI & Autocomplete: Categories
jQuery UI & Autocomplete: Custom data and display in drop down >>

Leave a comment

Leave a Reply