Tag Editor Field using jQuery similar to StackOverflow
The tag editor featured on the StackOverflow website (and all the StackExchange websites) is a real slick tag editor that makes it much nicer to enter tags than just a plain textbox. I searched a little and couldn’t find anything that works just like theirs, so I decided to build one.
Here’s some example usage of the tag editor:
<div id='SelectBox' style='width: 350px'></div>
<input id='btnClear' type='button' value='Clear' />
<input id='btnGetTags' type='button' value='Get Tags' />
<input id='btnAdd' type='button' value='Add Tag' />
<script>
$(function () {
// initialize tag editor and add a couple
// pre-selected tags
$('#SelectBox').selectit({
// the name of hidden input elements created
fieldname: 'tags',
// pre-selected tags
values: [
'javascript',
'css',
'jquery'
]
});
$('#btnGetTags').click(function () {
// display entered tags to user
alert($('#SelectBox').selectit('values').join(', '));
});
$('#btnClear').click(function () {
// clear al tags from editor
$('#SelectBox').selectit('clear');
});
$('#btnAdd').click(function () {
// programatically add tag to editor
var tag = prompt('Enter tag to add:', '');
if (tag && tag !== '') {
$('#SelectBox').selectit('add', tag);
}
});
});
</script>
Use at your own risk. This code is quick and dirty, and may contain bugs. This is the reason I didn’t throw it up on Github or CodePlex.
Have fun!
Related Posts
-
How to Hide a Column in AG-Grid and Prevent it from Displaying in the Tool Panel
11 Oct 2023 -
JavaScript: Loop through Array (using forEach)
03 Oct 2023 -
JavaScript: Parse a String to a Date
28 Sep 2023 -
JavaScript: Format Date to String
28 Sep 2023 -
JavaScript: How to Convert Map to an Array of Objects
28 Sep 2023 -
Check if element exists using JavaScript or jQuery
25 Sep 2023