jQuery Driven Tokenizing Additions

Facebook got tokenized input right. If you’ve ever sent someone a message, or searched for someone a message you probably used what was previously a less user-friendly system to perform this same task. The idea is easy – you want to enter one or more names or other text and select matches. Gmail uses the same kind of auto-complete to allow you to email to multiple email addresses, as do a host of other sites, so it’s surprising there aren’t better solutions to this in the public. I came across one amazing solution for this when I was working on MovieFly a few months ago, and was able to expand it with a few more options while working on SponsoredTweets.

The jQuery Tokenizing Autocomplete was released last year, with some nice additions to it in December. It’s an extremely rich plugin that behaves very similar to the Facebook version. You can select previously entered tokens and delete them, navigate completely by keyboard, or with the mouse – it’s amazing. There’s a few things that came up that I’ve added to it:

initialValues option

First is the ability to pass in a javascript array of initial values via the initialValues option. This is real simple:

$("#tokenize3").tokenInput("response.txt", {
  initialValues: [{"name":"The Dark Knight (2009)", "id":"12345"}, {"name":"Sweeny Todd (2008)", "id":"45334"}]
});

Real straightforward. When the page loads, the token input will be created with these two tokens pre-created.

defaultOptions

On MovieFly when you’re entering a movie for a viewing (that would show up on your recent viewings page), one thing thing that made sense to do was to have a way to pre-fill the list with some commonly used movies. So maybe you want it to show “new releases” since that’s what a large percentage of people are going to use. Another case might be if you want people to tag themselves (or something), and you want to show common tags. One easy way is for the “hint” to link to a list of common tags. Codewise it’s basically the same as initialValues.

$("#tokenize4").tokenInput("response.txt", {
  hintText: "Type a movie title, or see the <a href='#' class='defaultOptions'>current releases</a>.",
  defaultOptions: [{"name":"Hot Tub Time Machine (2010)", "id":"12345"},
                             {"name":"Clash of the Titans (2010)", "id":"12345"},
                             {"name":"Date Night (2010)", "id":"12345"},
                             {"name":"Alice in Wonderland (2010)", "id":"12345"}],
});

The key is the link with a class of “defaulOptions” in the hint text. The plugin finds this link and pre-fills the suggested matches when clicked.

The code is available on github, or check out an example of these and the basic behavior of the plugin. There’s already some great forks of the initial code, so seeing what other great additions have been made.

This entry was posted on Monday, March 29th, 2010 at 8:47 pm and is filed under Javascript. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.