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.
Features
- Intuitive UI for selecting multiple items from a large list
- Easy to skin/style purely in css, no images required
- Supports any backend which can generate JSON, including PHP, Rails, Django, ASP.net
- Smooth animations when results load
- Select, delete and navigate items using the mouse or keyboard
- Client-side result caching to reduce server load
- Crossdomain support via JSONP
- Callbacks when items are added or removed from the list
- Preprocess results from the server with the onResult callback
- Programatically add, remove, clear and get tokens
- Customize the output format of the results and tokens
Screenshots
Vertical list style item selection
Facebook style item selection
Installation & Setup
Create a server-side script to handle search requests
Create a server-side script (PHP, Rails, ASP.net, etc) to generate your search results. The script can fetch data from wherever you like, for example a database or a hardcoded list. Your script must accept a GET parameter named
q
which will contain the term to search for. E.g. http://www.example.com/myscript?q=queryYour script should output JSON search results in the following format:
Include and initialize the plugin
Include jQuery and Tokeninput Javascript and stylesheet files on your page, and attach to your text input: Tokeninput stylesheet: