Jqgrid + JQuery Autocomplete multiple input - jquery-ui

Question

I have the grid set up and working nicely. I wanted to add multiple input autocomplete functionality to the form view in JqGrid. The multiple autocomplete works but the extractLast function seems not to be working and I can add duplicate inputs.
Heres the code:
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();
}
function autocomplete_element(value, options) {
// creating input element
var $ac = $('<input type="text"/>');
// setting value to the one passed from jqGrid
$ac.val(value);
// creating autocomplete
$ac.autocomplete(
{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;
}
});
// returning element back to jqGrid
return $ac;
}
function autocomplete_value(elem, op, value) {
if (op == "set") {
$(elem).val(value);
}
return $(elem).val();
}
Grid colmodel:
{
...
editable: true,
edittype: "custom",
editoptions: {
custom_element: autocomplete_element,
custom_value: autocomplete_value
}
},
Which I found from JQuery UI
and German Rumm's blog
Any suggestions?
UPDATED!

Answer 1

It looks like example on jQuery UI site allows selecting the same element multiple times as well. The problem is in source function - it always checks the last term against all available terms when creating a suggest list.
Modify select callback to display only those terms that are not already present in a field.
source: function(request, response) {
var terms = request.terms.split(/,\s*/);
var last_term = terms.pop();
var tags = $.grep(availableTags, function(el) {
return $.inArray(el, terms) == -1);
});
response($.ui.autocomplete.filter(tags, last_term))
}