jQuery UI Autocomplete with Multiple Values from Database
jQuery UI Autocomplete with Multiple Values from Database
http://jqueryui.com/demos/autocomplete/#multiple-remote
Check the link above. Basically you have to call your server via getJSON
.autocomplete({
//blah-blah-blah
source: function( request, response ) {
$.getJSON( search.php, {
term: extractLast( request.term )
}, response );
},
//blah-blah-blah
$(function() {
function split(val) {
return val.split(/,s*/);
}
function extractLast(term) {
return split(term).pop();
}
$(#states_names).autocomplete({
minLength: 4,
source: function(request, response) {
$.ajax({
//receives json array answer from the url
url: search/state,
data: {
term: extractLast(request.term)
},
dataType: json,
type: POST,
success: function(data) {
response(data);
},
error: function() {
// added an error handler for the sake of the example
response($.ui.autocomplete.filter(
[opt1,opt2]
, 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;
}
});
});