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.
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 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
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:
- Solve problem with the extended methods and the multiple editors.
- 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.
- Some minor bug fixes.