Hi guys,
I am making a jquery tagging plugin.
I have an issue that,
When there is multiple instances of the plugin
on the page, if you click
on any <ul> that the plugin has been called
on it will put focus
on the <input /> in the last <ul> that the plugin has been called
on.
Why is this any how can I fix it.
$.widget("ui.tagit", {
// default options
options: {
tagSource: [],
triggerKeys: ['enter', 'space', 'comma', 'tab'],
initialTags: [],
minLength: 1
},
//private variables
_vars: {
lastKey: null,
element: null,
input: null,
tags: []
},
_keys: {
backspace: 8,
enter: 13,
space: 32,
comma: 44,
tab: 9
},
//initialization function
_create: function() {
var instance = this;
//store reference to the ul
this._vars.element = this.element;
//add class "tagit" for theming
this._vars.element.addClass("tagit");
//add any initial tags added through html to the array
this._vars.element.children('li').each(function() {
instance.options.initialTags.push($(this).text());
});
//add the html input
this._vars.element.html('<li class="tagit-new"><input class="tagit-input" type="text" /></li>');
this._vars.input = this._vars.element.find(".tagit-input");
//setup click handler
$(this._vars.element).click(function(e) {
if (e.target.tagName == 'A') {
// Removes a tag when the little 'x' is clicked.
$(e.target).parent().remove();
instance._popTag();
}
else {
instance._vars.input.focus();
}
});
//setup autcomplete handler
this.options.appendTo = this._vars.element;
this.options.source = this.options.tagSource;
this.options.select = function(event, ui) {
instance._addTag(ui.item.value);
return false;
}
this._vars.input.autocomplete(this.options);
//setup keydown handler
this._vars.input.keydown(function(e) {
var lastLi = instance._vars.element.children(".tagit-choice:last");
if (e.which == instance._keys.backspace)
return instance._backspace(lastLi);
if (instance._isInitKey(e.which)) {
event.preventDefault();
if ($(this).val().length >= instance.options.minLength)
instance._addTag($(this).val());
}
if (lastLi.hasClass('selected'))
lastLi.removeClass('selected');
instance._vars.lastKey = e.which;
});
//setup blur handler
this._vars.input.blur(function() {
instance._addTag($(this).val());
$(this).val('');
});
//define missing trim function for strings
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, "");
};
this._initialTags();
},
_popTag: function() {
return this._vars.tags.pop();
}
,
_addTag: function(value) {
this._vars.input.val("");
value = value.replace(/,+$/, "");
value = value.trim();
if (value == "" || this._exists(value))
return false;
var tag = "";
tag = '<li class="tagit-choice">' + value + '<a class="tagit-close">x</a></li>';
$(tag).insertBefore(this._vars.input.parent());
this._vars.input.val("");
this._vars.tags.push(value);
}
,
_exists: function(value) {
if (this._vars.tags.length == 0 || $.inArray(value, this._vars.tags) == -1)
return false;
return true;
}
,
_isInitKey : function(keyCode) {
var keyName = "";
for (var key in this._keys)
if (this._keys[key] == keyCode)
keyName = key
if ($.inArray(keyName, this.options.triggerKeys) != -1)
return true;
return false;
}
,
_backspace: function(li) {
if (this._vars.input.val() == "") {
// When backspace is pressed, the last tag is deleted.
if (this._vars.lastKey == this._keys.backspace) {
this._popTag();
li.remove();
this._vars.lastKey = null;
} else {
li.addClass('selected');
this._vars.lastKey = this._keys.backspace;
}
}
return true;
}
,
_initialTags: function() {
if (this.options.initialTags.length != 0) {
for (var i in this.options.initialTags)
if (!this._exists(this.options.initialTags[i]))
this._addTag(this.options.initialTags[i]);
}
}
,
tags: function() {
return this._vars.tags;
}
,
destroy: function() {
$.Widget.prototype.destroy.apply(this, arguments); // default destroy
this._vars['tags'] = [];
}
})
;
