Fork me on GitHub

Download this project in
either zip or tar format.

You can also clone this project from
git://github.com/sbfaulkner/jquery.token-field

jquery.token-field

a tokenized input plugin for jquery

The token-field plugin for jquery provides a convenient (and stylish!) way to collect lists of email addresses, tags, etc. on your forms. The default look and feel is liberally copied from Facebook's email address entry fields.

Dependencies

Install

  1. Copy javascript, stylesheet and images to your project.
  2. Include javascript and stylesheets in your html.
  3. Add textarea or input[type=text] to your html with comma-delimited values.
  4. Invoke the plugin in your document ready handler.

Example

<html>
  <head>
    <title>jquery.token-field example</title>
    <link rel="stylesheet" href="/stylesheets/token-field.css" type="text/css" media="screen">
    <script src="/javascripts/jquery.js" type="text/javascript"></script>
    <script src="/javascripts/jquery.token-field.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('textarea.email').tokenField({badToken:null});
      });
    </script>
  </head>
  <body>
    <textarea class='email' name='emails'>one@domain.com,two@other.net,three@somewhere.ca</textarea>
  </body>
</html>

Demo

Here is a demo page with several examples.

License

Author

S. Brent Faulkner (brentf@unwwwired.net)