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'> <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>