Question

The jQuery UI autocomplete multiple example provided here allows you to add the same item more than once.

How do I prevent this from happening?

Answer 1

If you take the example provided by jQuery UI here, add the following line within the select function of the autocomplete:

availableTags.splice($.inArray(ui.item.value, availableTags), 1);

This basically removes the item that has just been selected from the list of available tags.

The select function you end up with should look like this:

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( ", " );
    // remove added item from list of available items to select
    availableTags.splice($.inArray(ui.item.value, availableTags), 1);
    return false;
}