Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
JQuery plugin for auto completion of tags
Branch: master

This branch is even with nikku:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
css
docs
example
less
lib
LICENSE
README.md

README.md

jQuery Tagit

jQuery plugin for tag input fields, e.g. the ones used by Stackoverflow.

screenshot

CSS markup is based on bootstrap and built with Less support.

Inspired by Tag-it!.

Features

  • Autocompletion
  • Mouse and keyboard handling
  • Visual integration into bootstrapped form environments

Requirements

  • jQuery (tested with jQuery 1.6.2 but might work with earlier versions)
  • bootstrap for styling.

Usage

Include requirements and plugin in the header of your website

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.tagit.js"></script>
        <style type="text/css">
            @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-1.1.1.min.css');
            @import url('tagit.css');
        </style>
    </head>
    <!-- ... -->

Create a ul element in a bootstrap like form environment:

<form action="#">
    <fieldset>
        <div class="clearfix">
            <label>Experience in</label>
            <div class="input">
                <ul id="languages-select" class="fake-input" tabindex="1">
                    <li>Java</li>
                </ul>
            </div>
        </div>
    </fieldset>
</form>

Control the ul element using jQuery:

<script type="text/javascript">
    $(function() {
        var tags = ["Java", "Javascript", "Python", "C", 
                    "C++", "Ruby", "CSS", "HTML", "C#", 
                    "Visual Basic", "Prolog", "Smalltalk", 
                    "Scala", "Haskel", "Bash"];

        $("#languages-select").tagit({
            tags: tags,
            field: "language"
        });
    });
</script>

See the full example.

Something went wrong with that request. Please try again.