Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tokeninput is a jQuery plugin which allows your users to select multiple items from a predefined list, using autocompletion as they type to find each item. You may have seen a similar type of text entry when filling in the recipients field sending messages on facebook.
JavaScript PHP

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
examples
src
styles
.gitignore
ChangeLog.md
README.md
demo.html
demo_tabindex.html

README.md

jQuery Tokeninput: A Tokenizing Autocomplete Text Entry

Overview

Tokeninput is a jQuery plugin which allows your users to select multiple items from a predefined list, using autocompletion as they type to find each item. You may have seen a similar type of text entry when filling in the recipients field sending messages on facebook.

Changes from original jquery-tokeninput

This is a forked version of jquery-tokeninput blending vdepizzol's and loopj's versions, plus updating the search-by-function behavior to actually work and to be similar to JQuery UI Autocomplete's behavior.

In this version, in addition to merging loopj's 1.5 version with vdepizzol's improvements, the main change is that in addition to providing a URL or inline data for the first parameter, you can provide a search function to handle the lookups for you. This function can construct whatever type of request you like, such as:


  $("#element").tokenInput(
    function(query, response) {
      $.ajax({ url: "your url here",
               data: { q: query, extra: "stuff" },
               dataType: "json",
               success: function(data) { response(data) }
             });
    },
    {
      preventDuplicates: true,
      onAdd: function(list,item) { alert("You added " + item.name) }
    });

These changes are somewhat incompatible with the latest merges to the head of loopj's tree where a patch was accepted to have just a simple URL formatter function (instead of the "perform the search for you" function that I wrote a la JQuery UI Autocomplete).

Something went wrong with that request. Please try again.