Question

I’m using this plugin: http://loopj.com/jquery-tokeninput/ to do a suggestion field, where the user can start typing, choose the item they want, and they can add multiple suggestion.

this plugin have a onAdd and a onDelete callback.

What I want to do is, onAdd, I want to store the element id inside the value of an hidden input. They can add multiple item, so the input value end up like: 123,145,875,968

This is ok. Now where I need help, is with the OnDelete event. I need to update the input value to reflect the fact that they deleted an item.

Here’s the code

onAdd: function (item) {
   var value = $("#itemID").val();
   $("#itemID").val(value + item.id + ',');
},
onDelete: function (item) {
   ???? In word: Remove that specific ID from the input value, but keep the other value
}

PS. Im storing these IDs in an input to be able to easily get a list of my values for an ajax call later.
Now, Im not sure if that’s the best way of doing it, but yeah, that’s what I thought about as a “new” programmer 🙂

Thanks in advance

Answer 1

Updated

Looking at that plugins documentation:

selector.tokenInput("get");
Gets the array of selected tokens from the tokeninput (each item being an object of the kind {id: x, name: y}).

try something like this:

// do this at time of submit()
var tokens = $('#your-plugin-element-id').tokenInput( 'get' );
var output = [];
$.each( tokens, function( i, el ) {
  output.push( el.id );
});
var outputString = output.join( ',' );

Then you won’t have to keep track in a separate hidden input.

Even cleaner, but maybe harder to understand using map()

var tokens = $('#your-plugin-element-id').tokenInput( 'get' );
var outputString = $.map( tokens, function( el ) { return el.id; } ).join( ',' );

–

Old

this should work:

var itemList = $('#itemID').val().split(',');
for( var i=0 ; i<itemList.length ; i++ ) {
  if( itemList[i] == item.id ) {
    itemList.splice( i, 1 );
    break;
  }
}
$('#itemID').val( itemList.join( ',' ) );

Edit: this was a quick fix to your existing code, but serializing at submission time would be better as said in the other comment