TextboxList for jQuery

How to use

TextboxList is essentially very easy to use, but is extremely configurable and extensible. Let's review some sample usage scenarios:

new TextboxList('form_tags_input');

This turns the an input with an id of "form_tags_input" into a TextboxList widget. By default, as shown in the demo, the user can add new boxes by pressing enter, write between boxes, delete them with backspace and delete keys. Additionally, a delete button is shown in each of the added items. All these behaviors can be configured, as shown in the sections below.

var t = new TextboxList('form_tags_input');
 t.add('Tag 1').add('Tag 2').add('Tag 3');

In this example we call the public add() method of the TextboxList instance to add items from JavaScript.

Read more in the API Docs

// Standard initialization
var t = new $.TextboxList('#form_tags_input', {  });
t.add('Tag 1').add('Tag 2').add('Tag 3');               

// With custom adding keys 
var t2 = $('#form_tags_input_2').textboxlist({bitsOptions:{editable:{addKeys: [188]}}});

// Autocomplete initialization
var t4 = new $.TextboxList('#form_tags_input_3', {unique: true, plugins: {autocomplete: {}}});
t4.add('John Doe').add('Jane Roe');

// sample data loading with json, but can be jsonp, local, etc. 
// the only requirement is that you call setValues with an array of this format:
// [
//  [id, bit_plaintext (on which search is performed), bit_html (optional, otherwise plain_text is used), autocomplete_html (html for the item displayed in the autocomplete suggestions dropdown)]
// ]
// read autocomplete.php for a JSON response exmaple
t4.getContainer().addClass('textboxlist-loading');              
$.ajax({url: 'autocomplete.php', dataType: 'json', success: function(r){
    t4.plugins['autocomplete'].setValues(r);
    t4.getContainer().removeClass('textboxlist-loading');
}});                

// Autocomplete with poll the server as you type
var t5 = new $.TextboxList('#form_tags_input_4', {unique: true, plugins: {autocomplete: {
    minLength: 2,
    queryRemote: true,
    remote: {url: 'autocomplete2.php'}
}}});
t5.add('John Doe').add('Jane Roe');

See those example live in the demo page (view source code)