jQuery pstagger Plugin

A simple jQuery plugin in order to create tags input bars, this is still a beta so play around with it but we do not recommend to use it in production at the moment.

Do not hesitate to make PR for improvement or bug fixes !

Get it from Github

Latest version: 0.2.1 (beta)

Why we developed this plugin ?

Most of the other tags bar plugins don't allow you to modify your tags once you've written them (you have to delete the tag and re-write it). Since we use this input bar as a search bar, we wanted to keep it fully editable and in the same time give a visual hint on how the search works.

Instructions

Add mandatory files

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

Once that done, create an input like you would do in any other case:

<input id="input-tags" />

Then, simply call the tagsInput function on any field that should be treated as a list of tags. Then, make a call to pstagger plugin on all desired input to be 'Tagified'

$('#input-tags').pstagger();

Options

$(selector).pstagger({
    /* CSS custom */
    wrapperClassAdditional: 'myClass',
    tagsWrapperClassAdditional: 'myClass',
    tagClassAdditional: 'myClass',
    closingCrossClassAdditionnal: 'myClass',
    clearAllIconClassAdditional: 'myClass',
    clearAllSpanClassAdditional: 'myClass',
    tagInputWrapperClassAdditional: 'myClass',
    tagInputClassAdditional: 'myClass',
    /* Global configuration */
    delimiter: ' ',
    inputPlaceholder: 'Add tag ...',
    closingCross: true,
    context: null,
    clearAllBtn: false,
    /* Callbacks */
    onTagsChanged: null,
    onResetTags: null,
});

API

<tr>
  <td>tagsWrapperClassAdditional</td>
 <td>String</td>
  <td>''</td>
  <td>Add custom CSS to the plugin</a>    </tr>

<tr>
  <td>tagClassAdditional</td>
  <td>String</td>
  <td>''</td>
  <td>Add custom CSS to the plugin</a>
</tr>

<tr>
  <td>closingCrossClassAdditionnal</td>
  <td>String</td>
  <td>''</td>
  <td>Add custom CSS to the plugin</a>
</tr>

<tr>
  <td> tagInputWrapperClassAdditional</td>
  <td>String</td>
  <td>''</td>
  <td>Add custom CSS to the plugin</a>
</tr>

<tr>
  <td>tagInputClassAdditional</td>
  <td>String</td>
  <td>''</td>
  <td>Add custom CSS to the plugin</a>
</tr>

<tr>
  <td>clearAllIconClassAdditional</td>
  <td>String</td>
  <td>''</td>
  <td>Add custom CSS to the plugin</a>    
</tr>

<tr>
  <td>delimiter</td>
  <td>String</td>
  <td>' '</td>
  <td>Determine on which character the plugin has to explode the full string</td>
</tr>

<tr>
  <td>inputPlaceholder</td>
  <td>String</td>
  <td>'Add a tag...'</td>
  <td>Simply replace input placeholder by the one you choose</td>
</tr>

<tr>
  <td>closingCross</td>
  <td>Boolean</td>
  <td>true</td>
  <td>Whether we have to display a "closing cross" on each tag generated in order to remove them</td>
</tr>

<tr>
  <td>context</td>
  <td>Object</td>
  <td>null</td>
  <td>You may want to specify a specific context on your callback, just give that context here (e.g: this)</td>
</tr>

<tr>
  <td>clearAllBtn</td>
  <td>Boolean</td>
  <td>false</td>
  <td>Determine if the global reset input button has to be displayed
  </td>
</tr>

<tr>
  <td>onTagsChanged</td>
  <td>Callback</td>
  <td>none</td>
  <td>Callback called everytime input tag has changed, it will receive an array representing each tag available in the input
  </td>
</tr>

<tr>
  <td>onResetTags</td>
  <td>Callback</td>
  <td>none</td>
  <td>Callback called whenever the reset button is clicked and input emptied
  </td>
</tr>