Dynamic Token/Tag Input With Autocomplete - jQuery Tokeninput

The jQuery Tokeninput plugin transforms the regular text field into a dynamic, easy-to-style token/tag input with autocomplete/typeahead support. The users are allowed to select multiple tokens/tags from a predefined list that loads data from local or remote dataset via AJAX.

How to use it:

1. Load the main JavaScript and CSS files in the html document.

<script src="jquery.min.js"></script>
<script src="jquery.tokeninput.js"></script>
<link rel="stylesheet" href="token-input.css">

2. Load a theme CSS of your choice in the document. The plugin currently comes with 2 themes: Facebook and Mac:

<link rel="stylesheet" href="token-input-facebook.css">
<link rel="stylesheet" href="token-input-mac.css">

3. Create a normal text input field in the document.

<input type="text" id="demo-input">

4. Activate the token/tag input that loads autocomplete data from local JS objects.

$("#demo-input").tokenInput([
  {id: 7, name: "Ruby"},
  {id: 11, name: "Python"},
  {id: 13, name: "JavaScript"},
  {id: 17, name: "ActionScript"},
  {id: 19, name: "Scheme"},
  {id: 23, name: "Lisp"},
  {id: 29, name: "C#"},
  {id: 31, name: "Fortran"},
  {id: 37, name: "Visual Basic"},
  {id: 41, name: "C"},
  {id: 43, name: "C++"},
  {id: 47, name: "Java"}
]);

5. Activate the token/tag input that loads autocomplete data from external data source via AJAX requests.

$("#demo-input").tokenInput("json.php", {
  // options here
});

6. All default plugin options and callback functions.

$("#demo-input").tokenInput({

  // Search settings
  method: "GET",
  queryParam: "q",
  searchDelay: 300,
  minChars: 1,
  propertyToSearch: "name",
  jsonContainer: null,
  contentType: "json",
  excludeCurrent: false,
  excludeCurrentParameter: "x",

  // Prepopulation settings
  prePopulate: null,
  processPrePopulate: false,

  // Display settings
  hintText: "Type in a search term",
  noResultsText: "No results",
  searchingText: "Searching...",
  deleteText: "×",
  animateDropdown: true,
  placeholder: null,
  theme: null,
  zindex: 999,
  resultsLimit: null,

  enableHTML: false,

  resultsFormatter: function(item) {
    var string = item[this.propertyToSearch];
    return "<li>" + (this.enableHTML ? string : _escapeHTML(string)) + "</li>";
  },

  tokenFormatter: function(item) {
    var string = item[this.propertyToSearch];
    return "<li><p>" + (this.enableHTML ? string : _escapeHTML(string)) + "</p></li>";
  },

  // Tokenization settings
  tokenLimit: null,
  tokenDelimiter: ",",
  preventDuplicates: false,
  tokenValue: "id",

  // Behavioral settings
  allowFreeTagging: false,
  allowTabOut: false,
  autoSelectFirstResult: false,

  // Callbacks
  onResult: null,
  onCachedResult: null,
  onAdd: null,
  onFreeTaggingAdd: null,
  onDelete: null,
  onReady: null,

  // Other settings
  idPrefix: "token-input-",

  // Keep track if the input is currently in disabled mode
  disabled: false
  
});

7. API methods.

var myToken = $("#demo-input").tokenInput();

// add a new item
myToken.tokenInput("add", {id: x, name: y});

// remove an item
selector.tokenInput("remove", {id: x});
selector.tokenInput("remove", {name: y});

// clear the input
selector.tokenInput("clear");

// get the data
selector.tokenInput("get");

---

This awesome jQuery plugin is developed by loopj. For more Advanced Usages, please check the demo page or visit the official website.