fix skiptag variable scope

Merge branch 'master' of github.com:xoxco/jQuery-Tags-Input into rewrite
Conflicts: jquery.tagsinput.js
2026-08-09 12:56:35 +10:00 · 2012-04-11 15:55:16 -05:00 · 2012-04-11 15:53:30 -05:00 · 2012-04-11 15:48:14 -05:00 · 2012-04-11 13:44:40 -07:00 · 2012-04-11 13:43:57 -07:00
5 changed files with 301 additions and 252 deletions
@@ -1,18 +1,4 @@
-jQuery Tags Input Plugin 1.3.2
-
-Copyright (c) 2011 XOXCO, Inc
-
-Documentation for this plugin lives here:
-http://xoxco.com/clickable/jquery-tags-input
-
-Licensed under the MIT license:
-http://www.opensource.org/licenses/mit-license.php
-
-The git repository for this plugin can be found at:
-https://github.com/xoxco/jQuery-Tags-Input
-
-ben@xoxco.com
------------------------------------------------------
+# jQuery Tags Input Plugin 

 Do you use tags to organize content on your site? 
 This plugin will turn your boring tag list into a 
@@ -21,57 +7,63 @@ object with its own delete link. The plugin handles
 all the data - your form just sees a comma-delimited 
 list of tags!

+[Get it from Github](https://github.com/xoxco/jQuery-Tags-Input)

-Instructions
+[View Demo](http://xoxco.com/projects/code/tagsinput/)
+
+Created by [XOXCO](http://xoxco.com)
+
+
+## Instructions

 First, add the Javascript and CSS files to your <head> tag:

-<script src="jquery.tagsinput.js"></script>
-<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
+	<script src="jquery.tagsinput.js"></script>
+	<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />

 Create a real input in your form that will contain a comma-separated list of 
 tags. You can put any default or existing tags in the value attribute, and 
 they'll be handled properly.

-<input name="tags" id="tags" value="foo,bar,baz" />
+	<input name="tags" id="tags" value="foo,bar,baz" />

 Then, simply call the tagsInput function on any field that should be treated as
 a list of tags.

-$('#tags').tagsInput();
+	$('#tags').tagsInput();

 If you want to use jQuery.autocomplete, you can pass in a parameter with the 
 autocomplete url.

-$('#tags').tagsInput({
-  autocomplete_url:'http://myserver.com/api/autocomplete'
-});
+	$('#tags').tagsInput({
+	  autocomplete_url:'http://myserver.com/api/autocomplete'
+	});

 If you're using the bassistance jQuery.autocomplete, which takes extra 
 parameters, you can also send in options to the autocomplete plugin, as 
 described here.

-$('#tags').tagsInput({    
-  autocomplete_url:'http://myserver.com/api/autocomplete',
-  autocomplete:{selectFirst:true,width:'100px',autoFill:true}
-});
+	$('#tags').tagsInput({    
+	  autocomplete_url:'http://myserver.com/api/autocomplete',
+	  autocomplete:{selectFirst:true,width:'100px',autoFill:true}
+	});

 You can add and remove tags by calling the addTag() and removeTag() functions.

-$('#tags').addTag('foo');
-$('#tags').removeTag('bar');
+	$('#tags').addTag('foo');
+	$('#tags').removeTag('bar');

 You can import a list of tags using the importTags() function...

-$('#tags').importTags('foo,bar,baz');
+	$('#tags').importTags('foo,bar,baz');

 You can also use importTags() to reset the tag list...

-$('#tags').importTags('');
+	$('#tags').importTags('');

 And you can check if a tag exists using tagExist()...

-if ($('#tags').tagExist('foo')) { ... }
+	if ($('#tags').tagExist('foo')) { ... }

 If additional functionality is required when a tag is added or removed, you may
 specify callback functions via the onAddTag and onRemoveTag parameters.  Both 
@@ -89,21 +81,20 @@ By default, if the cursor is immediately after a tag, hitting backspace will
 delete that tag. If you want to override this, set the 'removeWithBackspace' 
 option to false.

-Options
-
-$(selector).tagsInput({
-   'autocomplete_url': url_to_autocomplete_api,
-   'autocomplete': { option: value, option: value},
-   'height':'100px',
-   'width':'300px',
-   'interactive':true,
-   'defaultText':'add a tag',
-   'onAddTag':callback_function,
-   'onRemoveTag':callback_function,
-   'onChange' : callback_function,
-   'removeWithBackspace' : true,
-   'minChars' : 0,
-   'maxChars' : 0 //if not provided there is no limit,
-   'placeholderColor' : '#666666'
-});
+## Options

+	$(selector).tagsInput({
+	   'autocomplete_url': url_to_autocomplete_api,
+	   'autocomplete': { option: value, option: value},
+	   'height':'100px',
+	   'width':'300px',
+	   'interactive':true,
+	   'defaultText':'add a tag',
+	   'onAddTag':callback_function,
+	   'onRemoveTag':callback_function,
+	   'onChange' : callback_function,
+	   'removeWithBackspace' : true,
+	   'minChars' : 0,
+	   'maxChars' : 0 //if not provided there is no limit,
+	   'placeholderColor' : '#666666'
+	});
@@ -0,0 +1,84 @@
+
+	<link rel="stylesheet" type="text/css" href="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.css" />
+	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
+	<script type="text/javascript" src="jquery.tagsinput.js"></script>
+
+	<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'></script>
+	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/start/jquery-ui.css" />
+	
+	
+	<script type="text/javascript">
+		
+		function onAddTag(tag) {
+			console.log("Added a tag: " + tag);
+		}
+		function onRemoveTag(tag) {
+			console.log("Removed a tag: " + tag);
+		}
+		
+		function onChangeTag(input,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,,onAddTag:onAddTag,onRemoveTag:onRemoveTag,onChange: onChangeTag});		
+			
+			
+
+
+			$('.tags').tagsInput({
+				onError: onError,
+				autocomplete: {source: ['a','alpha']}			
+			});;
+/*
+			$('#tags_2').tagsInput({
+				width: 'auto',
+				onChange: function(elem, elem_tags)
+				{
+					var languages = ['php','ruby','javascript'];
+					$('.tag', elem_tags).each(function()
+					{
+						if($(this).text().search(new RegExp('\\b(' + languages.join('|') + ')\\b')) >= 0)
+							$(this).css('background-color', 'yellow');
+					});
+				}
+			});
+			$('#tags_3').tagsInput({
+				width: 'auto',
+				autocomplete: {source: 'test/fake_json_endpoint.html'}
+//				autocomplete: {source: [{label:'Alpha',value:'1'},{label:'Beta',value:'x'}] }
+			});
+
+*/
+			
+
+// Uncomment this line to see the callback functions in action
+//			$('input.tags').tagsInput({onAddTag:onAddTag,onRemoveTag:onRemoveTag,onChange: onChangeTag});		
+
+// Uncomment this line to see an input with no interface for adding new tags.
+//			$('input.tags').tagsInput({interactive:false});
+		});
+	
+	</script>
+		<form>
+			<p><label>Defaults:</label>
+			<input id="tags_1" type="text" class="tags" value="foo,bar,baz,roffle" /></p>
+			
+			<p><label>Technologies: (Programming languages in yellow)</label>
+			<input id="tags_2" type="text" class="tags" value="php,ios,javascript,ruby,android,kindle" /></p>
+			
+			<p><label>Autocomplete:</label>
+			<input id='tags_3' type='text' class='tags' /></p>
+			
+		</form>
@@ -1,8 +1,8 @@
 /*

-	jQuery Tags Input Plugin 1.3.2
+	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,22 @@

 	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
+
+
+	// automatically size the input to show the entire value
 	$.fn.doAutosize = function(o){
 	    var minWidth = $(this).data('minwidth'),
 	        maxWidth = $(this).data('maxwidth'),
@@ -45,7 +55,6 @@

  };
  $.fn.resetAutosize = function(options){
-    // alert(JSON.stringify(options));
    var minWidth =  $(this).data('minwidth') || options.minInputWidth || $(this).width(),
        maxWidth = $(this).data('maxwidth') || options.maxInputWidth || ($(this).closest('.tagsinput').width() - options.inputPadding),
        val = '',
@@ -62,37 +71,53 @@
            whiteSpace: 'nowrap'
        }),
        testerId = $(this).attr('id')+'_autosize_tester';
-    if(! $('#'+testerId).length > 0){
-      testSubject.attr('id', testerId);
-      testSubject.appendTo('body');
-    }
-
-    input.data('minwidth', minWidth);
-    input.data('maxwidth', maxWidth);
-    input.data('tester_id', testerId);
-    input.css('width', minWidth);
-  };
-  
+	    if(! $('#'+testerId).length > 0){
+	      testSubject.attr('id', testerId);
+	      testSubject.appendTo('body');
+	    }
+	
+	    input.data('minwidth', minWidth);
+	    input.data('maxwidth', maxWidth);
+	    input.data('tester_id', testerId);
+	    input.css('width', minWidth);
+	};
+	  
 	$.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();
 				}

 				value = jQuery.trim(value);
 		
+				var skipTag  = false;
 				if (options.unique) {
-					var skipTag = $(tagslist).tagExist(value);
+					skipTag = $(this).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) { 
@@ -100,60 +125,59 @@
                        $('<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.input_wrapper);

 					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]);
 					}					
 				}
 		
 			});		
-			
 			return false;
 		};
 		
 	$.fn.removeTag = function(value) { 
 			value = unescape(value);
 			this.each(function() { 
-				var id = $(this).attr('id');
-	
-				var old = $(this).val().split(delimiter[id]);
+				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);
 				}
 			});
@@ -161,60 +185,64 @@
 			return false;
 		};
 	
-	$.fn.tagExist = function(val) {
-		return (jQuery.inArray(val, $(this)) >= 0); //true when tag exists, false when not
+	$.fn.tagExist = function(val) {	
+			var settings = $(this).data('settings');
+			var tagslist = $(this).val().split(settings.delimiter);	
+			return (jQuery.inArray(val, tagslist) >= 0); //true when tag exists, false when not
 	};
 	
 	// 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: null,
+	      autocompleteselect: null,
+	      '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,66 +254,92 @@

 			$(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);
 		
-				$(data.holder).bind('click',data,function(event) {
+		
+				// if the user clicks anywhere in the tag box, focus the input field
+				$(data.holder).on('click',data,function(event) {
 					$(event.data.fake_input).focus();
 				});
 			
-				$(data.fake_input).bind('focus',data,function(event) {
+				// if the user clicks in the input field…
+				$(data.fake_input).on('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 (settings.autocomplete_url != undefined) {
-					autocomplete_options = {source: settings.autocomplete_url};
-					for (attrname in settings.autocomplete) { 
-						autocomplete_options[attrname] = settings.autocomplete[attrname]; 
-					}
-				
-					if (jQuery.Autocompleter !== undefined) {
-						$(data.fake_input).autocomplete(settings.autocomplete_url, settings.autocomplete);
-						$(data.fake_input).bind('result',data,function(event,data,formatted) {
-							if (data) {
-								$('#'+id).addTag(data[0] + "",{focus:true,unique:(settings.unique)});
-							}
-					  	});
-					} else if (jQuery.ui.autocomplete !== undefined) {
-						$(data.fake_input).autocomplete(autocomplete_options);
-						$(data.fake_input).bind('autocompleteselect',data,function(event,ui) {
+			
+				// if an autocomplete has been specified, do some stuff…			
+				if (settings.autocomplete) {
+					// pass in the autocomplete settings to the autocomplete plugin
+					// provided by jquery UI
+					$(data.fake_input).autocomplete(settings.autocomplete);
+					
+					// if an autocompleteselect handler has been passed in, use that.
+					// otherwise, use our own.
+					if (settings.autocompleteselect) {
+						$(data.fake_input).on('autocompleteselect',data,settings.autocompleteselect);							
+					} else {	
+						$(data.fake_input).on('autocompleteselect',data,function(event,ui) {
 							$(event.data.real_input).addTag(ui.item.value,{focus:true,unique:(settings.unique)});
 							return false;
 						});
 					}
-				
 					
-				} else {
-						// if a user tabs out of the field, create a new tag
-						// this is only available if autocomplete is not used.
-						$(data.fake_input).bind('blur',data,function(event) { 
-							var d = $(this).attr('data-default');
-							if ($(event.data.fake_input).val()!='' && $(event.data.fake_input).val()!=d) { 
-								if( (event.data.minChars <= $(event.data.fake_input).val().length) && (!event.data.maxChars || (event.data.maxChars >= $(event.data.fake_input).val().length)) )
-									$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true,unique:(settings.unique)});
-							} else {
-								$(event.data.fake_input).val($(event.data.fake_input).attr('data-default'));
-								$(event.data.fake_input).css('color',settings.placeholderColor);
-							}
-							return false;
-						});
-				
+					// track whether or not the autocomplete is open so we can avoid adding duplicate tags
+					$(data.fake_input).on('autocompleteopen',data,function() {
+						$(this).data('autocompleteopen',true);
+						return false;
+					});
+					$(data.fake_input).on('autocompleteclose',data,function() {
+						$(this).data('autocompleteopen',null);
+						return false;
+					});
 				}
+							
+				// if the user tabs out of the field
+				// add the tag that was being typed
+				// UNLESS the autocompleter is open
+				// and then set back to default.
+				$(data.fake_input).on('blur',data,function(event) { 
+					if ($(event.data.fake_input).val()!='' && $(event.data.fake_input).val()!=event.data.defaultText) {
+						if (!$(this).data('autocompleteopen')) { 
+							if( (event.data.minChars <= $(event.data.fake_input).val().length) && (!event.data.maxChars || (event.data.maxChars >= $(event.data.fake_input).val().length)) )
+								$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true,unique:(settings.unique)});
+						} else {
+							// autocomplete is open, do not add tag because 
+							// this will be handled by the autocompleteselect event.
+						}
+					} else {
+						$(event.data.fake_input).val(event.data.defaultText);
+						$(event.data.fake_input).css('color',event.data.placeholderColor);
+						$(event.data.fake_input).removeClass('not_valid');
+					}
+					return false;
+				});
+
+
 				// if user types a comma, create a new tag
-				$(data.fake_input).bind('keypress',data,function(event) {
+				$(data.fake_input).on('keypress',data,function(event) {
 					if (event.which==event.data.delimiter.charCodeAt(0) || event.which==13 ) {
 					    event.preventDefault();
 						if( (event.data.minChars <= $(event.data.fake_input).val().length) && (!event.data.maxChars || (event.data.maxChars >= $(event.data.fake_input).val().length)) )
@@ -297,23 +351,23 @@
            
          			}
 				});
+
 				//Delete last tag on backspace
-				data.removeWithBackspace && $(data.fake_input).bind('keydown', function(event)
+				data.removeWithBackspace && $(data.fake_input).on('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 +375,6 @@
 				    });
 				}
 			} // if settings.interactive
-			return false;
 		});
 			
 		return this;
@@ -329,20 +382,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]);
 		}
 	};
@@ -1,79 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="utf-8" />
-	<title>jQuery Tags Input Test Page</title>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	
-	<link rel="stylesheet" type="text/css" href="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="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>
-	<link rel="stylesheet" type="text/css" href="http://xoxco.com/x/tagsinput/jquery-autocomplete/jquery.autocomplete.css" />
-	-->
-	<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'></script>
-	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/start/jquery-ui.css" />
-	
-	
-	<script type="text/javascript">
-		
-		function onAddTag(tag) {
-			alert("Added a tag: " + tag);
-		}
-		function onRemoveTag(tag) {
-			alert("Removed a tag: " + tag);
-		}
-		
-		function onChangeTag(input,tag) {
-			alert("Changed a tag: " + tag);
-		}
-		
-		$(function() {
-
-			$('#tags_1').tagsInput();
-			$('#tags_2').tagsInput({
-				onChange: function(elem, elem_tags)
-				{
-					var languages = ['php','ruby','javascript'];
-					$('.tag', elem_tags).each(function()
-					{
-						if($(this).text().search(new RegExp('\\b(' + languages.join('|') + ')\\b')) >= 0)
-							$(this).css('background-color', 'yellow');
-					});
-				}
-			});
-			$('#tags_3').tagsInput({
-				//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
-//			$('input.tags').tagsInput({onAddTag:onAddTag,onRemoveTag:onRemoveTag,onChange: onChangeTag});		
-
-// Uncomment this line to see an input with no interface for adding new tags.
-//			$('input.tags').tagsInput({interactive:false});
-		});
-	
-	</script>
-	
-</head>
-<body>
-	<header>
-		jQuery Tags Input!
-	</header>	
-	<section>	
-		<form>
-			<input id="tags_1" type="text" class="tags" value="foo,bar,baz,roffle" />
-			
-			<label>Technologies: (Programming languages in yellow)</label>
-			<input id="tags_2" type="text" class="tags" value="php,ios,javascript,ruby,android,kindle" />
-			
-			<label>Autocomplete:</label>
-			<input id='tags_3' type='text' class='tags'>
-			
-		</form>
-	</section>
-
-</body>
Author	SHA1	Message	Date
Ben Brown	d4916fab81	fix skiptag variable scope	2012-04-11 15:55:16 -05:00
Ben Brown	b6c34f138c	Merge branch 'master' of github.com:xoxco/jQuery-Tags-Input into rewrite Conflicts: jquery.tagsinput.js	2012-04-11 15:53:30 -05:00
Ben Brown	0403f22e12	Update jQuery version Fix small problem with tagExist	2012-04-11 15:48:14 -05:00
Ben Brown	bc50b025fb	Merge pull request #37 from devbrothers/master Multiple tags-input instances fix	2012-04-11 13:44:40 -07:00
Ben Brown	50a623375d	Merge pull request #38 from prymitive/master Use min-height for input area	2012-04-11 13:43:57 -07:00
Ben Brown	b20d10a78f	Merge pull request #51 from tybulewicz/master Fixed issue #49 - tagExist() now works correctly	2012-04-11 13:23:36 -07:00
Ben Brown	6d8d9d9a4f	Fix bug in tagExist	2012-04-11 15:22:57 -05:00
Tomasz Tybulewicz	b56a968f97	Fixed issue #49 - tagExist() now works correctly	2012-03-13 19:59:46 +01:00
Ben Brown	0cdef424cf	switch from using .bind to using .on	2012-02-19 22:36:20 -06:00
Ben Brown	be279931fb	Refactor to support broader range of selectors, less dependence on ID attribute, use of .data to store settings instead of global variables, add tag validation	2012-02-19 20:18:53 -06:00
Łukasz Mierzwa	7476b8b75f	use min-height instead of fixed setting, so that input area can grow if needed	2012-01-02 20:24:50 +01:00
Bartosz Grzybowski	51d058c46b	updated script to work properly with multiple instances	2012-01-02 16:30:40 +01:00
Ben Brown	6d2b1d3b72	add semicolon to end of minified version	2011-12-06 09:55:29 -08:00
Ben Brown	f8d1362f25	Remove errant comma from parameter list, fixing issue #34 and #35 for IE	2011-12-06 09:53:46 -08:00
Ben Brown	78487e0592	Add semicolon to end of file in minified version. Fix to issue #32	2011-11-21 08:35:25 -08:00
Ben Brown	8d06653aa6	readme update	2011-11-16 13:47:10 -08:00
Ben Brown	ad2889e6a4	updating readme to markdown	2011-11-16 13:46:21 -08:00