home/jQuery-Tags-Input
2
0
Fork 0
mirror of https://github.com/wahyd4/jQuery-Tags-Input.git synced 2026-08-09 04:46:44 +10:00
Code Issues Packages Projects Releases Wiki Activity

Refactor to support broader range of selectors,

Browse Source 
less dependence on ID attribute,
use of .data to store settings instead of global variables,
add tag validation
This commit is contained in:
Ben Brown
2012-02-19 20:18:53 -06:00
parent 6d2b1d3b72
commit be279931fb
2 changed files with 134 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example.html
+20 -4
View File
@@ -1,7 +1,7 @@
<link rel="stylesheet" type="text/css" href="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.js"></script>
<script type="text/javascript" src="jquery.tagsinput.js"></script>
<!-- To test using the original jQuery.autocomplete, uncomment the following -->
<!--
<script type='text/javascript' src='http://xoxco.com/x/tagsinput/jquery-autocomplete/jquery.autocomplete.min.js'></script>
@@ -14,18 +14,33 @@
<script type="text/javascript">
function onAddTag(tag) {
alert("Added a tag: " + tag);
console.log("Added a tag: " + tag);
}
function onRemoveTag(tag) {
alert("Removed a tag: " + tag);
console.log("Removed a tag: " + tag);
}
function onChangeTag(input,tag) {
alert("Changed a tag: " + tag);
console.log("Changed a tag: " + tag);
}
function validateTag(tag) {
console.log("Validating tag " + tag);
return true;
}
function onError(msg) {
console.log(msg);
}
$(function() {
// $('.tags').tagsInput({validateTag: validateTag,onError: onError,onAddTag:onAddTag,onRemoveTag:onRemoveTag,onChange: onChangeTag});
$('#tags_1').tagsInput({width:'auto'});
$('#tags_2').tagsInput({
width: 'auto',
@@ -45,6 +60,7 @@
//autocomplete_url:'test/fake_plaintext_endpoint.html' //jquery.autocomplete (not jquery ui)
autocomplete_url:'test/fake_json_endpoint.html' // jquery ui autocomplete requires a json endpoint
});
// Uncomment this line to see the callback functions in action
jquery.tagsinput.js
+114 -71
View File
@@ -1,8 +1,8 @@
/*
jQuery Tags Input Plugin 1.3.3
jQuery Tags Input Plugin 2.0
Copyright (c) 2011 XOXCO, Inc
Copyright (c) 2012 XOXCO, Inc
Documentation for this plugin lives here:
http://xoxco.com/clickable/jquery-tags-input
@@ -12,12 +12,19 @@
ben@xoxco.com
GOALS FOR 2.0
Fix identifier issue - should work with any valid jquery selector
Make internationalization friendly
add tag input validation
make sure autocomplete works with newest jquery
*/
(function($) {
var delimiter = new Array();
var tags_callbacks = new Array();
var internal_counter = 0; // this is used to create unique ids for each tag input
$.fn.doAutosize = function(o){
var minWidth = $(this).data('minwidth'),
maxWidth = $(this).data('maxwidth'),
@@ -76,9 +83,10 @@
$.fn.addTag = function(value,options) {
options = jQuery.extend({focus:false,callback:true},options);
this.each(function() {
var id = $(this).attr('id');
var tagslist = $(this).val().split(delimiter[id]);
var settings = $(this).data('settings');
var tagslist = $(this).val().split(settings.delimiter);
if (tagslist[0] == '') {
tagslist = new Array();
}
@@ -89,71 +97,89 @@
var skipTag = $(tagslist).tagExist(value);
if(skipTag == true) {
//Marks fake input as not_valid to let styling it
$('#'+id+'_tag').addClass('not_valid');
$(settings.fake_input).addClass('not_valid');
if (settings.onError) {
var f = settings.onError;
f.call(this,'duplicate');
}
}
} else {
var skipTag = false;
}
if (settings.validateTag) {
var f = settings.validateTag;
if (!f.call(this,value)) {
skipTag = true;
$(settings.fake_input).addClass('not_valid');
if (settings.onError) {
var f = settings.onError;
f.call(this,'validation');
}
}
}
if (value !='' && skipTag != true) {
$('<span>').addClass('tag').append(
$('<span>').text(value).append('&nbsp;&nbsp;'),
$('<a>', {
href : '#',
title : 'Removing tag',
title : settings.removeText,
text : 'x'
}).click(function () {
return $('#' + id).removeTag(escape(value));
return $(settings.real_input).removeTag(escape(value));
})
).insertBefore('#' + id + '_addTag');
).insertBefore(settings.fake_input);
tagslist.push(value);
$('#'+id+'_tag').val('');
$(settings.fake_input).val('');
if (options.focus) {
$('#'+id+'_tag').focus();
$(settings.fake_input).focus();
} else {
$('#'+id+'_tag').blur();
$(settings.fake_input).blur();
}
$.fn.tagsInput.updateTagsField(this,tagslist);
if (options.callback && tags_callbacks[id] && tags_callbacks[id]['onAddTag']) {
var f = tags_callbacks[id]['onAddTag'];
if (settings.onAddTag) {
var f = settings.onAddTag;
f.call(this, value);
}
if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
if(settings.onChange)
{
var i = tagslist.length;
var f = tags_callbacks[id]['onChange'];
var f = settings.onChange;
f.call(this, $(this), tagslist[i-1]);
}
}
});
console.log('added tag');
return false;
};
$.fn.removeTag = function(value) {
value = unescape(value);
this.each(function() {
var id = $(this).attr('id');
var old = $(this).val().split(delimiter[id]);
console.log("Remove tag " + value);
var settings = $(this).data('settings');
var old = $(this).val().split(settings.delimiter);
$('#'+id+'_tagsinput .tag').remove();
$(settings.holder + ' .tag').remove();
str = '';
for (i=0; i< old.length; i++) {
if (old[i]!=value) {
str = str + delimiter[id] +old[i];
str = str + settings.delimiter +old[i];
}
}
$.fn.tagsInput.importTags(this,str);
if (tags_callbacks[id] && tags_callbacks[id]['onRemoveTag']) {
var f = tags_callbacks[id]['onRemoveTag'];
if (settings.onRemoveTag) {
var f = settings.onRemoveTag;
f.call(this, value);
}
});
@@ -167,54 +193,55 @@
// clear all existing tags and import new ones from a string
$.fn.importTags = function(str) {
id = $(this).attr('id');
$('#'+id+'_tagsinput .tag').remove();
var settings = $(this).data('settings');
$(settings.holder + ' .tag').remove();
$.fn.tagsInput.importTags(this,str);
}
$.fn.tagsInput = function(options) {
var settings = jQuery.extend({
interactive:true,
defaultText:'add a tag',
minChars:0,
width:'300px',
height:'100px',
autocomplete: {selectFirst: false },
'hide':true,
'delimiter':',',
'unique':true,
removeWithBackspace:true,
placeholderColor:'#666666',
autosize: true,
comfortZone: 20,
inputPadding: 6*2
},options);
var settings = jQuery.extend({
interactive:true,
defaultText:'add a tag',
removeText:'Remove Tag',
minChars:0,
width:'auto',
minHeight:'100px',
height: 'auto',
autocomplete: {selectFirst: false },
'hide':true,
'delimiter':',',
'unique':true,
removeWithBackspace:true,
placeholderColor:'#666666',
autosize: true,
comfortZone: 20,
inputPadding: 6*2,
onChange: null, // events and handlers
onAddTag: null,
onRemoveTag: null,
validateTag: null,
onError: null
},options);
this.each(function() {
if (settings.hide) {
$(this).hide();
}
var id = $(this).attr('id')
var id = internal_counter++;
var data = jQuery.extend({
pid:id,
real_input: '#'+id,
real_input: this,
holder: '#'+id+'_tagsinput',
input_wrapper: '#'+id+'_addTag',
fake_input: '#'+id+'_tag'
},settings);
delimiter[id] = data.delimiter;
if (settings.onAddTag || settings.onRemoveTag || settings.onChange) {
tags_callbacks[id] = new Array();
tags_callbacks[id]['onAddTag'] = settings.onAddTag;
tags_callbacks[id]['onRemoveTag'] = settings.onRemoveTag;
tags_callbacks[id]['onChange'] = settings.onChange;
}
var markup = '<div id="'+id+'_tagsinput" class="tagsinput"><div id="'+id+'_addTag">';
$(this).addClass('tagsinput_processed');
var markup = '<div id="'+id+'_tagsinput" class="tagsinput"><div id="'+id+'_addTag" class="tagsinput_inputwrapper">';
if (settings.interactive) {
markup = markup + '<input id="'+id+'_tag" value="" data-default="'+settings.defaultText+'" />';
@@ -226,26 +253,41 @@
$(data.holder).css('width',settings.width);
$(data.holder).css('height',settings.height);
$(data.holder).css('min-height',settings.minHeight);
// store the settings with the DOM object so we can use them in other functions
$(this).data('settings',data);
if ($(data.real_input).val()!='') {
$.fn.tagsInput.importTags($(data.real_input),$(data.real_input).val());
}
if ($(this).val()!='') {
$.fn.tagsInput.importTags($(this),$(this).val());
}
if (settings.interactive) {
$(data.fake_input).val($(data.fake_input).attr('data-default'));
$(data.fake_input).css('color',settings.placeholderColor);
$(data.fake_input).resetAutosize(settings);
// if the user clicks anywhere in the tag box, focus the input field
$(data.holder).bind('click',data,function(event) {
$(event.data.fake_input).focus();
});
// if the user clicks in the input field…
$(data.fake_input).bind('focus',data,function(event) {
// empty the field
if ($(event.data.fake_input).val()==$(event.data.fake_input).attr('data-default')) {
$(event.data.fake_input).val('');
}
// set the field to the active color
$(event.data.fake_input).css('color','#000000');
});
// if an autocomplete url has been specified, do some stuff...
if (settings.autocomplete_url != undefined) {
autocomplete_options = {source: settings.autocomplete_url};
for (attrname in settings.autocomplete) {
@@ -284,6 +326,7 @@
});
}
// if user types a comma, create a new tag
$(data.fake_input).bind('keypress',data,function(event) {
if (event.which==event.data.delimiter.charCodeAt(0) || event.which==13 ) {
@@ -297,23 +340,23 @@
}
});
//Delete last tag on backspace
data.removeWithBackspace && $(data.fake_input).bind('keydown', function(event)
data.removeWithBackspace && $(data.fake_input).bind('keydown',data, function(event)
{
if(event.keyCode == 8 && $(this).val() == '')
{
event.preventDefault();
var last_tag = $(this).closest('.tagsinput').find('.tag:last').text();
var id = $(this).attr('id').replace(/_tag$/, '');
last_tag = last_tag.replace(/[\s]+x$/, '');
$('#' + id).removeTag(escape(last_tag));
$(data.real_input).removeTag(escape(last_tag));
$(this).trigger('focus');
}
});
$(data.fake_input).blur();
//Removes the not_valid class when user changes the value of the fake input
if(data.unique) {
if(data.unique || data.validateTag) {
$(data.fake_input).keydown(function(event){
if(event.keyCode == 8 || String.fromCharCode(event.which).match(/\w+|[áéíóúÁÉÍÓÚñÑ,/]+/)) {
$(this).removeClass('not_valid');
@@ -321,7 +364,7 @@
});
}
} // if settings.interactive
return false;
//return false;
});
return this;
@@ -329,20 +372,20 @@
};
$.fn.tagsInput.updateTagsField = function(obj,tagslist) {
var id = $(obj).attr('id');
$(obj).val(tagslist.join(delimiter[id]));
var settings = $(obj).data('settings');
$(obj).val(tagslist.join(settings.delimiter));
};
$.fn.tagsInput.importTags = function(obj,val) {
var settings = $(obj).data('settings');
$(obj).val('');
var id = $(obj).attr('id');
var tags = val.split(delimiter[id]);
var tags = val.split(settings.delimiter);
for (i=0; i<tags.length; i++) {
$(obj).addTag(tags[i],{focus:false,callback:false});
}
if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
if(settings.onChange)
{
var f = tags_callbacks[id]['onChange'];
var f = settings.onChange;
f.call(obj, obj, tags[i]);
}
};