$(function() {
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#names" ).autocomplete({
source: function(request, response) {
$.ajax({ url: "<?php echo site_url('update/suggestions'); ?>",
data: { term: extractLast( request.term )},
dataType: "json",
type: "POST",
success: function(data){
response(data);
},
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;
}
});
},
minLength: 2
});
});
The above code is replacing the existing selection rather than adding the new selection to the existing one. This is in Codeigniter. The single Autocomplete is working fine.
This is not for multiple input fields it is for adding multiple values to a single input field.
You code has several issues:
$.ajaxfunction andsourceoption function.minLength: 2is also misplaced.For instance you have:
which should be:
Check this DEMO with correct syntax. It works correctly (I’ve added an error handler to the ajax to display some static results).