This is a jQuery plugin to allow 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
• Layout controlled fully in CSS, easily customisable
• Result caching reduces server load
• No images required, just the plugin’s .js file and some CSS
• Handles json search data for autocompletion
• Smooth animations when results load
• Select items using the mouse or keyboard

Screenshots

Vertical list style item selection

Facebook style item selection

Usage

• Make sure you have jquery script included on your page
• Include jquery.tokeninput.js on your page
• Include one of the provided stylesheets, or make your own
• Create a server-side script (php/rails/django anything goes) to generate the search results.
  The script itself can fetch data from wherever you like, for example a database or a hardcoded list, but it must do the following:
  • Take exactly one GET parameter named “q” which will contain the query string. E.g. http://www.example.com/myscript?q=query
  • Output JSON search results in the following format:

    
    [{"id":"856","name":"House"},
    {"id":"1035","name":"Desperate Housewives"},
    {"id":"1048","name":"Dollhouse"},
    {"id":"1113","name":"Full House"}
    ]
    

• Turn text inputs into tokeninputs using jQuery and point them to your results script:

  
  <script type="text/javascript"><!--mce:0--></script>
  

• A list of selected item ids is created inside the original text entry, process them as usual when the form is submitted.

Demo: http://loopj.com/tokeninput/demo.html

Download:

• Script: http://www.loopj.com/tokeninput/jquery.tokeninput.js
• Facebook style CSS: http://www.loopj.com/tokeninput/token-input-facebook.css
• List style CSS: http://www.loopj.com/token-input.css

Source: http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/

Related Listings:

1. jQuery Address – Deep linking plugin This is a jQuery plugin to allow users to select...
2. Text Highlight – jQuery Plugin Text higlighting is part of DynaCloud – where tags/keywords are...
3. Autocomplete TextboxList Script Extend TextboxList to add closing functionality via a link added...
4. Airport – Information board text effect jQuery plugin Airport is a rather simple text effect plugin for Jquery....
5. JavaScript Text Higlighting jQuery Plugin Text higlighting is part of DynaCloud – where tags/keywords are...

Do you like this post?

Email: