jQuery Tags Input

Magically convert a simple text input into a cool tag list with this jQuery plugin.

Do you use tags to organize content on your site? This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The plugin handles all the data - your form just sees a comma-delimited list of tags!


Jump to: Examples, Download, Instructions, Options, License

Examples

Autocomplete

Add a tag: foo bar baz

Add a tag to all lists


No autocomplete:


This is what the form sees:


Spaces instead of commas:


Download

Download the latest from Github

And then follow XOXCO on Twitter for updates!

And bookmark our official jQuery project page.

Instructions

First, add the Javascript and CSS files to your <head> tag:

<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />

Create a real input in your form that will contain a comma-separated list of tags. You can put any default or existing tags in the value attribute, and they'll be handled properly.

<input name="tags" id="tags" value="foo,bar,baz" />

Then, simply call the tagsInput function on any field that should be treated as a list of tags.

$('#tags').tagsInput();

If you want to use jQuery.autocomplete, you can pass in a parameter with the autocomplete url.

$('#tags').tagsInput({autocomplete_url:'http://myserver.com/api/autocomplete'});

You can also send in options to the autocomplete plugin, as described here.

$('#tags').tagsInput({    autocomplete_url:'http://myserver.com/api/autocomplete',
   autocomplete:{selectFirst:true,width:'100px',autoFill:true}
});

You can add and remove tags by calling the addTag() and removeTag() functions.

$('#tags').addTag('foo');
$('#tags').removeTag('bar');

Options

$(selector).tagsInput({
   'autocomplete_url': url_to_autocomplete_api,
   'autocomplete': { option: value, option: value},
   'height':'100px',
   'width':'300px',
   'unique':true,
   'defaultText':'add a tag'
});

License

This code is released under the MIT software license.

Announcing SendTab

Ben uses SendTab to send SendTab.com to his tv...

Today, we are releasing SendTab, a Safari extension that lets you send tabs from your laptop or phone to your living room computer.

We live in a connected household, where laptops and iPads outnumber residents. Our living room TV is connected to a Mac Mini, which we use for all of our media consumption - we stream a lot of video from all over the web. However, we do most of our browsing and discovery on our laptops and iPads, and right now, the process of sending something from a laptop to the big screen is really annoying.

That's why we built SendTab. Now, with a single tap, the current tab we're viewing will appear within seconds on the big screen. Any page can instantly be sent from Safari, Firefox, Chrome and any iOS device to the big screen.

Of course, not everyone has a computer connected to their TV. SendTab is handy for all sorts of other things:

  • Quickly send a tab from one browser to another...
  • Send tabs from your iPhone or iPad to your laptop...
  • Send tabs to your girlfriend!

SendTab also has an easy to use API, so developers can send tabs from within their apps. Neat, eh?

Download SendTab

Many thanks to XOXCO's #1 intern, Damien Bell, for his hard work on SendTab, and to all of our talented designer friends who helped us design the SendTab button, and to our computer-tv having friends who helped us test. Thanks, dudes!

Random Reruns: Netflix Edition

We've expanded our web tv channel surfing tool, Random Reruns to include movies from your Netflix Instant Watch Queue.

If you've got a Netflix account and use the Instant Watch feature, you should try it out! Instead of wasting time browsing through endless listings, let Random Reruns pick a movie for you!

Play here: Random Reruns: Netflix Edition

It looks like this:

Random Netflix

One day, I'll find enough time to finish up the protoype I built that takes a feed of video URLs and turns them into a "lean back" experience, complete with interstitials and "Coming Up Next" teasers. Til then, you can still get random reruns from Hulu or random reruns of classic Star Trek.

WolframAlpha Search Plugin

When I saw WolframAlpha, I knew I was going to have a lot of questions I wanted to ask it. So I made a Firefox search plugin. It looks like this:

WolframAlpha Search Plugin Screenshot

Hey Lifehackers! Check out the other things XOXCO makes like a way to get random reruns from Hulu or a Twitter bot that tracks the DJIA. And snag our feed to get Fresh Clickables in your inbox.

RandomTrek

I know it has only been a day since we asked you to get excited about Random Reruns, but with the new Star Trek movie on the horizon and The Iconfactory making us crazy with all of their awesome Star Trek icons, I couldn't resist jumping on the bandwagon. After all, not a day goes by when I don't spend a little time with Kirk, Spock and Bones. Usually in bed.

Random Reruns + Star Trek = RandomTrek

Every time you click on it, RandomTrek will give you a random episode of classic Star Trek from CBS.com.

And while you are instantly loading random episodes of this historic show, ponder the fact that it's been more than 40 years since these episodes originally aired on olde tyme broadcast tv.

Random Reruns

We don't do TV at the XOXCO HQ. After years of paying exhorbitant fees for cable, we've gone 100% internet for our viewing needs with a Mac Mini attached to our TV in the living room. This is all made possible by the folks at Hulu who offer a ton of our favorite shows, new and old, on demand, in full screen, for free.

But making the leap from normal TV to internet TV means you lose the ability to just turn it on. In order to watch something on Hulu, even in the background, I have to search, sort, browse and select through thousands of choices. Do I want to watch a new episode of 30 Rock? Or maybe an old episode of He-man? It takes way too much thinking!

That's why I created Random Reruns. I wanted a way to channel surf through my favorite shows on Hulu. Using the magic of personalized feeds and embed codes, Random Reruns will pick random episodes from your Hulu favorites and let you stay on the couch where you belong.

Random Reruns

Clickable: Ups and Downs

Latest Tweet:
    Follow on Twitter

    For a reason I don't fully understand, I get a kick out of watching the stock market spluttering around like a balloon that has come untied. I have no idea how this is directly affecting me - I swore off that tab in Mint long ago - so I am excited by both the ups, and the downs. All I know is, I want to be watching when The Great Depression II starts!

    To make my sick little obsession easier, I skipped some SXSW morning panels to hack on Ups and Downs, a Twitter bot that will tell you how the Dow Jones Industrial Average has been doing. The bot tweets every 30 minutes while the market is open in New York. Follow Ups and Downs on Twitter and bear witness to the ECONOCALYPSE!

    Clickable: Click to Swim!

    Dakota and I are always kicking around silly ideas for videogames. I hadn't worked on a game since the mid-Nineties when everything I did was written in Turbo Pascal for DOS. But when Dakota and I thought up the concept for Click to Swim, I knew I had to make it real.

    It took me about three days of work to hack out the first version, mostly spent drawing 50 versions of a little naked guy treading water. It was a lot of fun, and I felt like I was learning a lot about how Flash 9.0 works. The game went through a few revisions as Dakota and I played it and sent it around to our friends. We even tested out a multiplayer mode. I probably swam for about 20 hours while on conference calls.

    The final version, to the right, represents about 6 furious hours of refactoring and redrawing (and a restore-from-backup) that I did a few weeks ago. To commemorate the glorious launch of this new section of our website, I think its time for this to become the very first "XOXCO Clickable!" I am now attaching the official seal of "It works, ship it!"

    All of the work we did, including all the previous versions (and a few wallpapers) are available on Swim's permanent page: CLICK TO SWIM