tagbox

A simple jQuery plugin to painlessly create input boxes for tag lists, like the ones used on StackOverflow or Linkedin.
jQueryUI is NOT required!

example screenshot

Demo

A demo with live HTML preview is available here.

How To

What you'll need

Just import jQuery (either 1.10 or 2.0), the plugin javascript file and the related stylesheet (a default CSS file is inlcuded).

<head>
  <link rel="stylesheet" type="text/css" href="style/layout.css"> <!-- your general CSS -->
  <link rel="stylesheet" type="text/css" href="style/tag_box.css"> <!-- tagbox related CSS -->

  <script type="text/javascript" src="scripts/jquery-2.0.3.min.js"></script>
  <script type="text/javascript" src="scripts/tagbox.min.js"></script> <!-- the plugin -->
  <script type="text/javascript" src="scripts/logic.js"></script> <!-- your custom script -->
</head>

(of course, you can package and minify everything in a single file)

To use the plugin, you'll need a <form> containing the <div> you plan to use as the tag input.

<form id="the_parent_form" accept-charset="UTF-8" action="/form_action" method="post">
  <!-- other inputs and elements... -->
  <div id="tag_box"></div>
  <!-- other inputs and elements... -->
</form>

Trigger the plugin

Once you have setup your <form> and your <div>, you can just call:

$("#tag_box").tagbox();

The result will be:

<form id="the_parent_form" accept-charset="UTF-8" action="/form_action" method="post">
  <!-- other inputs and elements... -->
  <div id="tag_box">
    <div class="tag_element">
      <span class="tag_label">example</span>
      <a href="#" title="remove" class="tag_dismiss">&times;</a>
    </div>

    <input name="type_target" id="type_target" type="text" maxlength="40">
  </div>
  <!-- other inputs and elements... -->
</form>

Options

You can pass the function an optional object with some configuration values. Here are the defaults:

$("#tag_box").tagbox({
  typeTargetNameAndId : "type_target",
  tagInputsArrayName : "tag_list",
  includeExampleTag : true
});

Style

The plugin comes with a default stylesheet for the tag widget (SCSS).
Of course you can use your own.

How it works

The plugin listens for keypress events and reacts on enter, ,, space or tab.
When one of these keys is pressed, it creates a new graphical tag_element in the tag box, and inserts in the form a new hidden input for the new inserted value. The hidden inputs have a collective name (can be configured) and will be received by the server as an array of values.
Removing a graphical tag_element also removes the corresponding hidden input.

Contribute

With this plugin I wanted to keep things simple, but I'd like to hear suggestions about features and configuration options.
If you want you can send me a pull request:

fork on GitHub
git clone your fork on your computer
git checkout -b your_new_feature_branch
implement your modifications
git add . and git commit
git push
create a pull request on GitHub