jQuery plugin: tagEditor

This month I’ve been working on an existing jQuery plugin called tagEditor. It is a plugin that turns an ordinary text input field into a dynamic tag tokenizer. The idea is that it can be used as a tag input or edit form control. It interacts a lot like the tag editor used here in WordPress or other popular tools that use tags. Tags are separated by a separator (most commonly an enter or ,) and then transformed into a list where the tag can be removed by clicking on it. It is usable together with an auto-complete (the jQuery UI auto-complete works well) to create the perfect user experience.

Together with the plugin’s original creator Karl-Johan Sjögren version 1.4 has been developed and released. More details can be found on the jQuery plugin page and on the demo page by Karl-Johan.

Why?

well, very simple! I needed it and it was not yet up to specifications for my project. I needed the list the be created above the input field instead of below. I needed the delete icon to be in an icon sprite so I needed a way to put in an image and I needed some controls in a dynamic form environment. All this lead to me making some changes. Instead of doing it for myself I decided to contribute to the project to use for everyone who would need it. Enjoy!

Updates:

Updates by me:

  • Major change in extension of the object
  • Moved getTags to tagEditorGetTags for naming convention
  • Changed tagEditor so that it can be called without arguments
  • Changed call for getTags to $(object).tagEditorGetTags()
  • Changed addTag to return a true or false value as a success indicator
  • Added resetTags method to clear the input and set the default given tags as start
  • Added tagEditorResetTags as API for resetTags: $(object).tagEditorResetTags()
  • Added tagEditorAddTag as API for addTag: $(object).tagEditorAddTag(‘string’)
  • Added continuousOutputBuild option to allow continuous building for dynamic forms
  • Added tagsBeforeField option to switch places between tags added and the input field
  • Added imageTag option to add and image to the list for styling purposes
  • Added imageTagUrl option to define custom image for styling purposes

Updates by Karl-Johan:

  • Normalized the string chars in the script to ‘
  • Added a minified version of the script to the package using

Extra notes:

The plugin is currently experiencing some problems regarding the use of the extended object methods because of some globally stored variables. The extended methods that are placed in the object only work for the last editor that was added to the page. Using multiple editors together with the extended methods is an issue!!!

extended methods affected:

  • $(object).tagEditorGetTags()
  • $(object).tagEditorResetTags()
  • $(object).tagEditorAddTag(‘string’)

Future development

  1. Solve problem with the extended methods and the multiple editors.
  2. Improve .tagEditorResetTags() extended method to accept an array that will be the new reset value. Note that the reset method is to used as a method to mimic form reset behavior. Starting value of the form is the reset value.
  3. Some minor bug fixes.
Advertisements

, , ,

  1. #1 by Zach Girod on 2010/06/16 - 16:25

    I have having trouble getting the continuousOutputBuild feature working. I have a hidden field but it is not getting the value. Could you please provide an example of how to use the continuousOutputBuild feature with a hidden field?

    Thanks much and great plugin!

  2. #2 by Joost Elfering on 2010/06/16 - 23:47

    the continuousOutputBuild option is automatically turned off but can be turned on by adding ‘continuousOutputBuild: true’ (without the single quotes) to your options array. Now you will see that it will automatically build the tags in a string in your hidden.

    example:
    $(inputObject).tagEditor({continuousOutputBuild: true});

    you can also add any other options like that. the named array could be {completeOnBlur: true, continuousOutputBuild: true} to let it complete the tag on going outside of the box and automatically build the hidden field.

  3. #3 by Scott LeMay on 2010/08/24 - 23:06

    Looks like the methods…
    – tagEditorResetTags
    – tagEditorGetTags

    will fail if there are multiple tageditors on a page. It only works on last tageditor declared. Perhaps a better selector is needed.

  4. #4 by Joost Elfering on 2010/08/24 - 23:12

    I am aware of the problem. the basic build of the version I started working on did not create an object or stored the tags in a proper way. I improved that a lot but the one instance of the editor on one page still stands.

    Currently I have no personal need for this feature. That’s why it has not been dealt with. If you have a patch or a solution please contact Karl-Johan Sjögren as he is owner of the plugin.

    I need to have the multiple instances of this plugin working in about 2 to 3 months. If you have a build that does work please share is as I can use it.

  5. #5 by tomato45un on 2010/12/14 - 02:29

    Hi,

    finding there is an bugs when i try to put watermark on the text box.
    at document.ready the tag editor add that watermark words.

    is there a way to put all the after div to make a good alignment.

    1
    2
    3

    • #6 by Joost Elfering on 2010/12/14 - 02:37

      Currently the tageditor is not equipt for watermarks. From my own contributions to the project I didn’t need that specific feature. There are a bunch of options in HTML5 that you could use, but they are not cross browser compatible. If you want the feature I can only suggest you create a patch so a new version can be released.

      Karl-Johan Sjögren is the maintainer of the plugin. If you want to contribute you need to get in contact with him. There is no repository setup so we might need to put some attention into that.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: