Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

example for key-value-label items in availableTags array

  • Loading branch information...
commit c8e0e5123417bb06d5be9165c873c420b5fb11d7 1 parent 7f52490
@baio authored
Showing with 85 additions and 4 deletions.
  1. +5 −1 js/tag-it.js
  2. +80 −3 my_example.html
View
6 js/tag-it.js
@@ -284,7 +284,7 @@
// Autocomplete.
if (this.options.availableTags || this.options.tagSource) {
- this._tagInput.autocomplete({
+ var autocomplete = this._tagInput.autocomplete({
source: this.options.tagSource,
select: function(event, ui) {
// Delete the last tag if we autocomplete something despite the input being empty
@@ -301,6 +301,8 @@
return false;
}
});
+
+ autocomplete.data("tagit", this);
}
},
@@ -448,6 +450,8 @@
tag.append('<input type="hidden" style="display:none;" value="' + escapedValue + '" name="' + this.options.itemName + '[' + this.options.fieldName + '][]">');
}
+ tag.data("tagit", this);
+
this._trigger('onTagAdded', null, tag);
// Cleaning the input.
View
83 my_example.html
@@ -19,9 +19,38 @@
<script>
+ function getTagItTags(array)
+ {
+ return $.map(array, function(element) {
+ var key = typeof element.key != 'undefined' ? element.key : -1;
+ var val = typeof element.value != 'undefined' ? element.value :
+ (typeof element.label != 'undefined' ? element.label : element);
+ var label = typeof element.label != 'undefined' ? element.label : val;
+ return {value : val, label : label, key : key};
+ });
+ }
+
+ function getTagKey($tagit, tag)
+ {
+ var vn = $tagit.options.valuesNode;
+ if (vn){
+ var value = $(":first", tag).text();
+ var item = $.grep(getTagItTags($tagit.options.availableTags), function(element){
+ return element.value == value;
+ });
+
+ return item.length > 0 ? item[0].key : -1;
+ }
+ }
+
+ function tagitExpellExistent(items, existent)
+ {
+ return $.grep(items, function(e) {return $.inArray(existent, e.value);});
+ }
+
function create_it()
{
- var sampleTags = ['c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua'];
+ var sampleTags = [{key : 0, value : 'c++'}, {key : 1, label : 'java'} , {key : 2, value : 'php', label : 'php [2]'} , 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua'];
$('#tagField').tagit({
@@ -30,6 +59,20 @@
allowNotInList: false,
availableTags: sampleTags,
animate : false,
+ valuesNode : $("#tagFieldVlues"),
+ tagSource : function(search, showChoices)
+ {
+ var that = (this.element).data("tagit");
+ var filter = search.term.toLowerCase();
+ var choices = getTagItTags(that.options.availableTags);
+ choices = $.grep(choices, function(element) {
+ // Only match autocomplete options that begin with the search term.
+ // (Case insensitive.)
+ return (element.value.toLowerCase().indexOf(filter) === 0);
+ });
+
+ showChoices(tagitExpellExistent(choices, that.assignedTags()));
+ },
onMaxChars: function(widget, input)
{
console.log("onMaxChars");
@@ -41,6 +84,39 @@
onNotAllowed: function()
{
console.log("onNotAllowed");
+ },
+
+ onTagAdded: function(event, tag) {
+
+ var that = tag.data("tagit");
+ var vn = that.options.valuesNode;
+
+ if (vn){
+ var value = $(":first", tag).text();
+ var item = $.grep(getTagItTags(that.options.availableTags), function(element){
+ return element.value == value;
+ });
+
+ var key = item.length > 0 ? item[0].key : -1;
+
+ vn.val((vn.val() ? vn.val() + "," : "") + key);
+ }
+ },
+
+ onTagRemoved: function(event, tag) {
+
+ var that = tag.data("tagit");
+ var vn = that.options.valuesNode;
+
+ if (vn){
+ var val = $(":first", tag).text();
+ var values = $(this).val().split(',');
+ var i = values.indexOf(val);
+ var keys = vn.val().split(',');
+ keys.splice(i, 1);
+ vn.val(keys.join(','));
+ }
+
}
});
}
@@ -51,7 +127,7 @@
}
$(document).ready(function(){
- //create_it();
+ create_it();
});
</script>
</head>
@@ -60,7 +136,8 @@
<p>
If you instantiate Tag-it on an INPUT element, it will default to being singleField, with that INPUT element as the singleFieldNode. This is the simplest way to have a gracefully-degrading tag widget.
</p>
- <input name="tags" id="tagField" value="Apple, Orange" style="top: 200px; width: 300px; position: absolute;">
+ <input name="tags" id="tagField" value="Apple, Orange" style="width: 300px">
+ <input name="tags" id="tagFieldVlues" readonly>
</form>
<button onclick='destroy_it();'>destroy it!</button>
Please sign in to comment.
Something went wrong with that request. Please try again.