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>