updated minified version

fix to issue #28
https://github.com/xoxco/jQuery-Tags-Input/issues/28 onChange now receives the tag added or removed.
2026-08-09 12:56:35 +10:00 · 2011-11-15 11:49:36 -08:00 · 2011-11-15 11:41:58 -08:00 · 2011-11-15 11:35:32 -08:00 · 2011-11-15 11:25:27 -08:00 · 2011-11-15 11:10:35 -08:00
12 changed files with 551 additions and 488 deletions
@@ -0,0 +1,109 @@
+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
+------------------------------------------------------
+
+Do you use tags to organize content on your site? 
+This plugin will turn your boring tag list into a 
+magical input that turns each tag into a style-able 
+object with its own delete link. The plugin handles 
+all the data - your form just sees a comma-delimited 
+list of tags!
+
+
+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" />
+
+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" />
+
+Then, simply call the tagsInput function on any field that should be treated as
+a list of tags.
+
+$('#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'
+});
+
+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}
+});
+
+You can add and remove tags by calling the addTag() and removeTag() functions.
+
+$('#tags').addTag('foo');
+$('#tags').removeTag('bar');
+
+You can import a list of tags using the importTags() function...
+
+$('#tags').importTags('foo,bar,baz');
+
+You can also use importTags() to reset the tag list...
+
+$('#tags').importTags('');
+
+And you can check if a tag exists using tagExist()...
+
+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 
+functions should accept a single tag as the parameter.
+
+If you do not want to provide a way to add tags, or you would prefer to provide 
+an alternate interface for adding tags to the box, you may pass an false into 
+the optional 'interactive' parameter. The tags will still be rendered as per 
+usual, and the addTag and removeTag functions will operate as expected.   
+
+If you want a function to be called every time a tag is updated/deleted, set it
+as the 'onChange' option.
+
+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'
+});
+
@@ -1,146 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <title>Jquery-tags-input by xoxco</title>
-    
-    <link rel="stylesheet" href="stylesheets/styles.css">
-    <link rel="stylesheet" href="stylesheets/pygment_trac.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
-    <!--[if lt IE 9]>
-    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-  </head>
-  <body>
-    <div class="wrapper">
-      <header>
-        <h1>Jquery-tags-input</h1>
-        <p>Magically convert a simple text input into a cool tag list with this jQuery plugin.</p>
-        <p class="view"><a href="https://github.com/xoxco/jQuery-Tags-Input">View the Project on GitHub <small>xoxco/jQuery-Tags-Input</small></a></p>
-        <ul>
-          <li><a href="https://github.com/xoxco/jQuery-Tags-Input/zipball/master">Download <strong>ZIP File</strong></a></li>
-          <li><a href="https://github.com/xoxco/jQuery-Tags-Input/tarball/master">Download <strong>TAR Ball</strong></a></li>
-          <li><a href="https://github.com/xoxco/jQuery-Tags-Input">Fork On <strong>GitHub</strong></a></li>
-        </ul>
-      </header>
-      <section>
-        <h1>jQuery Tags Input Plugin</h1>
-
-<p>Do you use tags to organize content on your site? 
-This plugin will turn your boring tag list into a 
-magical input that turns each tag into a style-able 
-object with its own delete link. The plugin handles 
-all the data - your form just sees a comma-delimited 
-list of tags!</p>
-
-<p><a href="https://github.com/xoxco/jQuery-Tags-Input">Get it from Github</a></p>
-
-<p><a href="http://xoxco.com/projects/code/tagsinput/">View Demo</a></p>
-
-<p>Created by <a href="http://xoxco.com">XOXCO</a></p>
-
-<h2>Instructions</h2>
-
-<p>First, add the Javascript and CSS files to your </p> tag:
-
-<pre><code>&lt;script src="jquery.tagsinput.js"&gt;&lt;/script&gt;
-&lt;link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" /&gt;
-</code></pre>
-
-<p>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.</p>
-
-<pre><code>&lt;input name="tags" id="tags" value="foo,bar,baz" /&gt;
-</code></pre>
-
-<p>Then, simply call the tagsInput function on any field that should be treated as
-a list of tags.</p>
-
-<pre><code>$('#tags').tagsInput();
-</code></pre>
-
-<p>If you want to use jQuery.autocomplete, you can pass in a parameter with the 
-autocomplete url.</p>
-
-<pre><code>$('#tags').tagsInput({
-  autocomplete_url:'<a href="http://myserver.com/api/autocomplete">http://myserver.com/api/autocomplete</a>'
-});
-</code></pre>
-
-<p>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.</p>
-
-<pre><code>$('#tags').tagsInput({    
-  autocomplete_url:'<a href="http://myserver.com/api/autocomplete">http://myserver.com/api/autocomplete</a>',
-  autocomplete:{selectFirst:true,width:'100px',autoFill:true}
-});
-</code></pre>
-
-<p>You can add and remove tags by calling the addTag() and removeTag() functions.</p>
-
-<pre><code>$('#tags').addTag('foo');
-$('#tags').removeTag('bar');
-</code></pre>
-
-<p>You can import a list of tags using the importTags() function...</p>
-
-<pre><code>$('#tags').importTags('foo,bar,baz');
-</code></pre>
-
-<p>You can also use importTags() to reset the tag list...</p>
-
-<pre><code>$('#tags').importTags('');
-</code></pre>
-
-<p>And you can check if a tag exists using tagExist()...</p>
-
-<pre><code>if ($('#tags').tagExist('foo')) { ... }
-</code></pre>
-
-<p>If additional functionality is required when a tag is added or removed, you may
-specify callback functions via the onAddTag and onRemoveTag parameters.  Both 
-functions should accept a single tag as the parameter.</p>
-
-<p>If you do not want to provide a way to add tags, or you would prefer to provide 
-an alternate interface for adding tags to the box, you may pass an false into 
-the optional 'interactive' parameter. The tags will still be rendered as per 
-usual, and the addTag and removeTag functions will operate as expected.   </p>
-
-<p>If you want a function to be called every time a tag is updated/deleted, set it
-as the 'onChange' option.</p>
-
-<p>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.</p>
-
-<h2>Options</h2>
-
-<pre><code>$(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'
-});
-</code></pre>
-      </section>
-      <footer>
-        <p>This project is maintained by <a href="https://github.com/xoxco">xoxco</a></p>
-        <p><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
-      </footer>
-    </div>
-    <script src="javascripts/scale.fix.js"></script>
-    
-  </body>
-</html>
@@ -1,17 +0,0 @@
-var metas = document.getElementsByTagName('meta');
-var i;
-if (navigator.userAgent.match(/iPhone/i)) {
-  for (i=0; i<metas.length; i++) {
-    if (metas[i].name == "viewport") {
-      metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
-    }
-  }
-  document.addEventListener("gesturestart", gestureStart, false);
-}
-function gestureStart() {
-  for (i=0; i<metas.length; i++) {
-    if (metas[i].name == "viewport") {
-      metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
-    }
-  }
-}
@@ -0,0 +1,7 @@
+div.tagsinput { border:1px solid #CCC; background: #FFF; padding:5px; width:300px; height:100px; overflow-y: auto;}
+div.tagsinput span.tag { border: 1px solid #a5d24a; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cde69c; color: #638421; margin-right: 5px; margin-bottom:5px;font-family: helvetica;  font-size:13px;}
+div.tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration:none; font-size: 11px;  } 
+div.tagsinput input { width:80px; margin:0px; font-family: helvetica; font-size: 13px; border:1px solid transparent; padding:5px; background: transparent; color: #000; outline:0px;  margin-right:5px; margin-bottom:5px; }
+div.tagsinput div { display:block; float: left; } 
+.tags_clear { clear: both; width: 100%; height: 0px; }
+.not_valid {background: #FBD8DB !important; color: #90111A !important;}
@@ -0,0 +1,350 @@
+/*
+
+	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
+
+	ben@xoxco.com
+
+*/
+
+(function($) {
+
+	var delimiter = new Array();
+	var tags_callbacks = new Array();
+	$.fn.doAutosize = function(o){
+	    var minWidth = $(this).data('minwidth'),
+	        maxWidth = $(this).data('maxwidth'),
+	        val = '',
+	        input = $(this),
+	        testSubject = $('#'+$(this).data('tester_id'));
+	
+	    if (val === (val = input.val())) {return;}
+	
+	    // Enter new content into testSubject
+	    var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,' ').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+	    testSubject.html(escaped);
+	    // Calculate new width + whether to change
+	    var testerWidth = testSubject.width(),
+	        newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
+	        currentWidth = input.width(),
+	        isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
+	                             || (newWidth > minWidth && newWidth < maxWidth);
+	
+	    // Animate width
+	    if (isValidWidthChange) {
+	        input.width(newWidth);
+	    }
+
+
+  };
+  $.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 = '',
+        input = $(this),
+        testSubject = $('<tester/>').css({
+            position: 'absolute',
+            top: -9999,
+            left: -9999,
+            width: 'auto',
+            fontSize: input.css('fontSize'),
+            fontFamily: input.css('fontFamily'),
+            fontWeight: input.css('fontWeight'),
+            letterSpacing: input.css('letterSpacing'),
+            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);
+  };
+  
+	$.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]);
+				if (tagslist[0] == '') { 
+					tagslist = new Array();
+				}
+
+				value = jQuery.trim(value);
+		
+				if (options.unique) {
+					var skipTag = $(tagslist).tagExist(value);
+					if(skipTag == true) {
+					    //Marks fake input as not_valid to let styling it
+    				    $('#'+id+'_tag').addClass('not_valid');
+    				}
+				} else {
+					var skipTag = false; 
+				}
+				
+				if (value !='' && skipTag != true) { 
+                    $('<span>').addClass('tag').append(
+                        $('<span>').text(value).append('&nbsp;&nbsp;'),
+                        $('<a>', {
+                            href  : '#',
+                            title : 'Removing tag',
+                            text  : 'x'
+                        }).click(function () {
+                            return $('#' + id).removeTag(escape(value));
+                        })
+                    ).insertBefore('#' + id + '_addTag');
+
+					tagslist.push(value);
+				
+					$('#'+id+'_tag').val('');
+					if (options.focus) {
+						$('#'+id+'_tag').focus();
+					} else {		
+						$('#'+id+'_tag').blur();
+					}
+					
+					$.fn.tagsInput.updateTagsField(this,tagslist);
+					
+					if (options.callback && tags_callbacks[id] && tags_callbacks[id]['onAddTag']) {
+						var f = tags_callbacks[id]['onAddTag'];
+						f.call(this, value);
+					}
+					if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
+					{
+						var i = tagslist.length;
+						var f = tags_callbacks[id]['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]);
+					
+				$('#'+id+'_tagsinput .tag').remove();
+				str = '';
+				for (i=0; i< old.length; i++) { 
+					if (old[i]!=value) { 
+						str = str + delimiter[id] +old[i];
+					}
+				}
+				
+				$.fn.tagsInput.importTags(this,str);
+
+				if (tags_callbacks[id] && tags_callbacks[id]['onRemoveTag']) {
+					var f = tags_callbacks[id]['onRemoveTag'];
+					f.call(this, value);
+				}
+			});
+					
+			return false;
+		};
+	
+	$.fn.tagExist = function(val) {
+		return (jQuery.inArray(val, $(this)) >= 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();
+		$.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);
+
+		this.each(function() { 
+			if (settings.hide) { 
+				$(this).hide();				
+			}
+				
+			var id = $(this).attr('id')
+			
+			var data = jQuery.extend({
+				pid:id,
+				real_input: '#'+id,
+				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">';
+			
+			if (settings.interactive) {
+				markup = markup + '<input id="'+id+'_tag" value="" data-default="'+settings.defaultText+'" />';
+			}
+			
+			markup = markup + '</div><div class="tags_clear"></div></div>';
+			
+			$(markup).insertAfter(this);
+
+			$(data.holder).css('width',settings.width);
+			$(data.holder).css('height',settings.height);
+	
+			if ($(data.real_input).val()!='') { 
+				$.fn.tagsInput.importTags($(data.real_input),$(data.real_input).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) {
+					$(event.data.fake_input).focus();
+				});
+			
+				$(data.fake_input).bind('focus',data,function(event) {
+					if ($(event.data.fake_input).val()==$(event.data.fake_input).attr('data-default')) { 
+						$(event.data.fake_input).val('');
+					}
+					$(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) {
+							$(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;
+						});
+				
+				}
+				// 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 ) {
+					    event.preventDefault();
+						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)});
+					  	$(event.data.fake_input).resetAutosize(settings);
+						return false;
+					} else if (event.data.autosize) {
+			            $(event.data.fake_input).doAutosize(settings);
+            
+          			}
+				});
+				//Delete last tag on backspace
+				data.removeWithBackspace && $(data.fake_input).bind('keydown', 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));
+						 $(this).trigger('focus');
+					}
+				});
+				$(data.fake_input).blur();
+				
+				//Removes the not_valid class when user changes the value of the fake input
+				if(data.unique) {
+				    $(data.fake_input).keydown(function(event){
+				        if(event.keyCode == 8 || String.fromCharCode(event.which).match(/\w+|[áéíóúÁÉÍÓÚñÑ,/]+/)) {
+				            $(this).removeClass('not_valid');
+				        }
+				    });
+				}
+			} // if settings.interactive
+			return false;
+		});
+			
+		return this;
+	
+	};
+	
+	$.fn.tagsInput.updateTagsField = function(obj,tagslist) { 
+		var id = $(obj).attr('id');
+		$(obj).val(tagslist.join(delimiter[id]));
+	};
+	
+	$.fn.tagsInput.importTags = function(obj,val) {			
+		$(obj).val('');
+		var id = $(obj).attr('id');
+		var tags = val.split(delimiter[id]);
+		for (i=0; i<tags.length; i++) { 
+			$(obj).addTag(tags[i],{focus:false,callback:false});
+		}
+		if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
+		{
+			var f = tags_callbacks[id]['onChange'];
+			f.call(obj, obj, tags[i]);
+		}
+	};
+
+})(jQuery);
@@ -1 +0,0 @@
-{"name":"Jquery-tags-input","body":"# jQuery Tags Input Plugin \r\n\r\nDo you use tags to organize content on your site? \r\nThis plugin will turn your boring tag list into a \r\nmagical input that turns each tag into a style-able \r\nobject with its own delete link. The plugin handles \r\nall the data - your form just sees a comma-delimited \r\nlist of tags!\r\n\r\n[Get it from Github](https://github.com/xoxco/jQuery-Tags-Input)\r\n\r\n[View Demo](http://xoxco.com/projects/code/tagsinput/)\r\n\r\nCreated by [XOXCO](http://xoxco.com)\r\n\r\n\r\n## Instructions\r\n\r\nFirst, add the Javascript and CSS files to your <head> tag:\r\n\r\n\t<script src=\"jquery.tagsinput.js\"></script>\r\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"jquery.tagsinput.css\" />\r\n\r\nCreate a real input in your form that will contain a comma-separated list of \r\ntags. You can put any default or existing tags in the value attribute, and \r\nthey'll be handled properly.\r\n\r\n\t<input name=\"tags\" id=\"tags\" value=\"foo,bar,baz\" />\r\n\r\nThen, simply call the tagsInput function on any field that should be treated as\r\na list of tags.\r\n\r\n\t$('#tags').tagsInput();\r\n\r\nIf you want to use jQuery.autocomplete, you can pass in a parameter with the \r\nautocomplete url.\r\n\r\n\t$('#tags').tagsInput({\r\n\t  autocomplete_url:'http://myserver.com/api/autocomplete'\r\n\t});\r\n\r\nIf you're using the bassistance jQuery.autocomplete, which takes extra \r\nparameters, you can also send in options to the autocomplete plugin, as \r\ndescribed here.\r\n\r\n\t$('#tags').tagsInput({    \r\n\t  autocomplete_url:'http://myserver.com/api/autocomplete',\r\n\t  autocomplete:{selectFirst:true,width:'100px',autoFill:true}\r\n\t});\r\n\r\nYou can add and remove tags by calling the addTag() and removeTag() functions.\r\n\r\n\t$('#tags').addTag('foo');\r\n\t$('#tags').removeTag('bar');\r\n\r\nYou can import a list of tags using the importTags() function...\r\n\r\n\t$('#tags').importTags('foo,bar,baz');\r\n\r\nYou can also use importTags() to reset the tag list...\r\n\r\n\t$('#tags').importTags('');\r\n\r\nAnd you can check if a tag exists using tagExist()...\r\n\r\n\tif ($('#tags').tagExist('foo')) { ... }\r\n\r\nIf additional functionality is required when a tag is added or removed, you may\r\nspecify callback functions via the onAddTag and onRemoveTag parameters.  Both \r\nfunctions should accept a single tag as the parameter.\r\n\r\nIf you do not want to provide a way to add tags, or you would prefer to provide \r\nan alternate interface for adding tags to the box, you may pass an false into \r\nthe optional 'interactive' parameter. The tags will still be rendered as per \r\nusual, and the addTag and removeTag functions will operate as expected.   \r\n\r\nIf you want a function to be called every time a tag is updated/deleted, set it\r\nas the 'onChange' option.\r\n\r\nBy default, if the cursor is immediately after a tag, hitting backspace will \r\ndelete that tag. If you want to override this, set the 'removeWithBackspace' \r\noption to false.\r\n\r\n## Options\r\n\r\n\t$(selector).tagsInput({\r\n\t   'autocomplete_url': url_to_autocomplete_api,\r\n\t   'autocomplete': { option: value, option: value},\r\n\t   'height':'100px',\r\n\t   'width':'300px',\r\n\t   'interactive':true,\r\n\t   'defaultText':'add a tag',\r\n\t   'onAddTag':callback_function,\r\n\t   'onRemoveTag':callback_function,\r\n\t   'onChange' : callback_function,\r\n\t   'removeWithBackspace' : true,\r\n\t   'minChars' : 0,\r\n\t   'maxChars' : 0 //if not provided there is no limit,\r\n\t   'placeholderColor' : '#666666'\r\n\t});","tagline":"Magically convert a simple text input into a cool tag list with this jQuery plugin.","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}
@@ -1,69 +0,0 @@
-.highlight  { background: #ffffff; }
-.highlight .c { color: #999988; font-style: italic } /* Comment */
-.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
-.highlight .k { font-weight: bold } /* Keyword */
-.highlight .o { font-weight: bold } /* Operator */
-.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
-.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
-.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
-.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
-.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
-.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
-.highlight .ge { font-style: italic } /* Generic.Emph */
-.highlight .gr { color: #aa0000 } /* Generic.Error */
-.highlight .gh { color: #999999 } /* Generic.Heading */
-.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
-.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
-.highlight .go { color: #888888 } /* Generic.Output */
-.highlight .gp { color: #555555 } /* Generic.Prompt */
-.highlight .gs { font-weight: bold } /* Generic.Strong */
-.highlight .gu { color: #800080; font-weight: bold; } /* Generic.Subheading */
-.highlight .gt { color: #aa0000 } /* Generic.Traceback */
-.highlight .kc { font-weight: bold } /* Keyword.Constant */
-.highlight .kd { font-weight: bold } /* Keyword.Declaration */
-.highlight .kn { font-weight: bold } /* Keyword.Namespace */
-.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
-.highlight .kr { font-weight: bold } /* Keyword.Reserved */
-.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
-.highlight .m { color: #009999 } /* Literal.Number */
-.highlight .s { color: #d14 } /* Literal.String */
-.highlight .na { color: #008080 } /* Name.Attribute */
-.highlight .nb { color: #0086B3 } /* Name.Builtin */
-.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
-.highlight .no { color: #008080 } /* Name.Constant */
-.highlight .ni { color: #800080 } /* Name.Entity */
-.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
-.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
-.highlight .nn { color: #555555 } /* Name.Namespace */
-.highlight .nt { color: #000080 } /* Name.Tag */
-.highlight .nv { color: #008080 } /* Name.Variable */
-.highlight .ow { font-weight: bold } /* Operator.Word */
-.highlight .w { color: #bbbbbb } /* Text.Whitespace */
-.highlight .mf { color: #009999 } /* Literal.Number.Float */
-.highlight .mh { color: #009999 } /* Literal.Number.Hex */
-.highlight .mi { color: #009999 } /* Literal.Number.Integer */
-.highlight .mo { color: #009999 } /* Literal.Number.Oct */
-.highlight .sb { color: #d14 } /* Literal.String.Backtick */
-.highlight .sc { color: #d14 } /* Literal.String.Char */
-.highlight .sd { color: #d14 } /* Literal.String.Doc */
-.highlight .s2 { color: #d14 } /* Literal.String.Double */
-.highlight .se { color: #d14 } /* Literal.String.Escape */
-.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
-.highlight .si { color: #d14 } /* Literal.String.Interpol */
-.highlight .sx { color: #d14 } /* Literal.String.Other */
-.highlight .sr { color: #009926 } /* Literal.String.Regex */
-.highlight .s1 { color: #d14 } /* Literal.String.Single */
-.highlight .ss { color: #990073 } /* Literal.String.Symbol */
-.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
-.highlight .vc { color: #008080 } /* Name.Variable.Class */
-.highlight .vg { color: #008080 } /* Name.Variable.Global */
-.highlight .vi { color: #008080 } /* Name.Variable.Instance */
-.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
-
-.type-csharp .highlight .k { color: #0000FF }
-.type-csharp .highlight .kt { color: #0000FF }
-.type-csharp .highlight .nf { color: #000000; font-weight: normal }
-.type-csharp .highlight .nc { color: #2B91AF }
-.type-csharp .highlight .nn { color: #000000 }
-.type-csharp .highlight .s { color: #A31515 }
-.type-csharp .highlight .sc { color: #A31515 }
@@ -1,255 +0,0 @@
-@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
-
-body {
-  padding:50px;
-  font:14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color:#777;
-  font-weight:300;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  color:#222;
-  margin:0 0 20px;
-}
-
-p, ul, ol, table, pre, dl {
-  margin:0 0 20px;
-}
-
-h1, h2, h3 {
-  line-height:1.1;
-}
-
-h1 {
-  font-size:28px;
-}
-
-h2 {
-  color:#393939;
-}
-
-h3, h4, h5, h6 {
-  color:#494949;
-}
-
-a {
-  color:#39c;
-  font-weight:400;
-  text-decoration:none;
-}
-
-a small {
-  font-size:11px;
-  color:#777;
-  margin-top:-0.6em;
-  display:block;
-}
-
-.wrapper {
-  width:860px;
-  margin:0 auto;
-}
-
-blockquote {
-  border-left:1px solid #e5e5e5;
-  margin:0;
-  padding:0 0 0 20px;
-  font-style:italic;
-}
-
-code, pre {
-  font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
-  color:#333;
-  font-size:12px;
-}
-
-pre {
-  padding:8px 15px;
-  background: #f8f8f8;  
-  border-radius:5px;
-  border:1px solid #e5e5e5;
-  overflow-x: auto;
-}
-
-table {
-  width:100%;
-  border-collapse:collapse;
-}
-
-th, td {
-  text-align:left;
-  padding:5px 10px;
-  border-bottom:1px solid #e5e5e5;
-}
-
-dt {
-  color:#444;
-  font-weight:700;
-}
-
-th {
-  color:#444;
-}
-
-img {
-  max-width:100%;
-}
-
-header {
-  width:270px;
-  float:left;
-  position:fixed;
-}
-
-header ul {
-  list-style:none;
-  height:40px;
-  
-  padding:0;
-  
-  background: #eee;
-  background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
-  background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
-  background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
-  background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
-  background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
-  
-  border-radius:5px;
-  border:1px solid #d2d2d2;
-  box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
-  width:270px;
-}
-
-header li {
-  width:89px;
-  float:left;
-  border-right:1px solid #d2d2d2;
-  height:40px;
-}
-
-header ul a {
-  line-height:1;
-  font-size:11px;
-  color:#999;
-  display:block;
-  text-align:center;
-  padding-top:6px;
-  height:40px;
-}
-
-strong {
-  color:#222;
-  font-weight:700;
-}
-
-header ul li + li {
-  width:88px;
-  border-left:1px solid #fff;
-}
-
-header ul li + li + li {
-  border-right:none;
-  width:89px;
-}
-
-header ul a strong {
-  font-size:14px;
-  display:block;
-  color:#222;
-}
-
-section {
-  width:500px;
-  float:right;
-  padding-bottom:50px;
-}
-
-small {
-  font-size:11px;
-}
-
-hr {
-  border:0;
-  background:#e5e5e5;
-  height:1px;
-  margin:0 0 20px;
-}
-
-footer {
-  width:270px;
-  float:left;
-  position:fixed;
-  bottom:50px;
-}
-
-@media print, screen and (max-width: 960px) {
-  
-  div.wrapper {
-    width:auto;
-    margin:0;
-  }
-  
-  header, section, footer {
-    float:none;
-    position:static;
-    width:auto;
-  }
-  
-  header {
-    padding-right:320px;
-  }
-  
-  section {
-    border:1px solid #e5e5e5;
-    border-width:1px 0;
-    padding:20px 0;
-    margin:0 0 20px;
-  }
-  
-  header a small {
-    display:inline;
-  }
-  
-  header ul {
-    position:absolute;
-    right:50px;
-    top:52px;
-  }
-}
-
-@media print, screen and (max-width: 720px) {
-  body {
-    word-wrap:break-word;
-  }
-  
-  header {
-    padding:0;
-  }
-  
-  header ul, header p.view {
-    position:static;
-  }
-  
-  pre, code {
-    word-wrap:normal;
-  }
-}
-
-@media print, screen and (max-width: 480px) {
-  body {
-    padding:15px;
-  }
-  
-  header ul {
-    display:none;
-  }
-}
-
-@media print {
-  body {
-    padding:0.4in;
-    font-size:12pt;
-    color:#444;
-  }
-}
@@ -0,0 +1,79 @@
+<!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>
@@ -0,0 +1 @@
+[ { "id": "Netta rufina", "label": "Red-crested Pochard", "value": "Red-crested Pochard" }, { "id": "Sterna sandvicensis", "label": "Sandwich Tern", "value": "Sandwich Tern" }, { "id": "Saxicola rubetra", "label": "Whinchat", "value": "Whinchat" }, { "id": "Saxicola rubicola", "label": "European Stonechat", "value": "European Stonechat" }, { "id": "Lanius senator", "label": "Woodchat Shrike", "value": "Woodchat Shrike" }, { "id": "Coccothraustes coccothraustes", "label": "Hawfinch", "value": "Hawfinch" }, { "id": "Ficedula hypoleuca", "label": "Eurasian Pied Flycatcher", "value": "Eurasian Pied Flycatcher" }, { "id": "Sitta europaea", "label": "Eurasian Nuthatch", "value": "Eurasian Nuthatch" }, { "id": "Pyrrhula pyrrhula", "label": "Eurasian Bullfinch", "value": "Eurasian Bullfinch" }, { "id": "Muscicapa striata", "label": "Spotted Flycatcher", "value": "Spotted Flycatcher" }, { "id": "Carduelis chloris", "label": "European Greenfinch", "value": "European Greenfinch" }, { "id": "Carduelis carduelis", "label": "European Goldfinch", "value": "European Goldfinch" } ]
@@ -0,0 +1,4 @@
+inky
+pinky
+blinky
+clyde
Author	SHA1	Message	Date
Ben Brown	73c60604f8	updated minified version	2011-11-15 11:49:36 -08:00
Ben Brown	49fc5f3ab1	fix to issue #28 https://github.com/xoxco/jQuery-Tags-Input/issues/28 onChange now receives the tag added or removed.	2011-11-15 11:41:58 -08:00
Ben Brown	5437401613	Merge branch 'autogrow-input' of http://github.com/therabidbanana/jQuery-Tags-Input into therabidbanana-autogrow-input Conflicts: jquery.tagsinput.js	2011-11-15 11:35:32 -08:00
Ben Brown	55145e9390	use data[0] instead of data when using old autocompleter	2011-11-15 11:25:27 -08:00
Ben Brown	00a112153c	Merge branch 'master' of github.com:xoxco/jQuery-Tags-Input	2011-11-15 11:10:35 -08:00
Ben Brown	53bce4bf40	Merge pull request #21 from cboden/master Suggested fix for #20	2011-11-15 11:10:20 -08:00
Ben Brown	08c91e2f67	Merge branch 'master' of github.com:xoxco/jQuery-Tags-Input	2011-11-15 11:07:44 -08:00
Ben Brown	b8665626c6	Merge pull request #18 from javiertoledo/master Mark fake input as not_valid to let users style it on repeated tag	2011-11-15 11:07:34 -08:00
Ben Brown	2f564beaad	Merge branch 'master' of github.com:xoxco/jQuery-Tags-Input	2011-11-15 11:05:58 -08:00
Ben Brown	0b7d62a3e1	Update README, bump version number	2011-11-15 11:05:15 -08:00
Ben Brown	b7d339216d	Merge pull request #17 from javiertoledo/ffac87c585a7e02b1658b628315666de33b489b1 I have addressed the Issue #15 opened by Desi-Planet and wrote a fix	2011-11-15 11:02:45 -08:00
Ben Brown	fdf650de12	Merge pull request #26 from xorrizon/master Fixed onAddTag timing bug	2011-11-15 10:59:12 -08:00
Ben Brown	dcc33019ec	Fix problem in importTags where tag elements were not properly removed due to missing definition of id variable	2011-11-15 09:45:28 -08:00
Xorrizon	fa10428b04	Fixed a bug where the "onAddTag" callback is fired before the input field is updated	2011-09-26 15:06:24 +02:00
David Haslem	37a4fb1e8e	Working autosize	2011-08-22 12:31:11 -04:00
David Haslem	53ffc5f6ed	Set up initial hooks	2011-08-22 11:24:19 -04:00
Chris Boden	1cc6f5b2f8	Fixed scope bug	2011-07-28 16:18:38 -04:00
Javier Toledo	1b461629fe	Mark as not_valid the fake input on repeated tag I have added some code to add a not_valid class to the fake input to be able to stylish it when some value is repeated and I have selected the unique option.	2011-07-12 21:20:16 +01:00
Javier Toledo	ffac87c585	Fixed a bug when creating multiple tags-input in same page Some variables used global scope, so each new instance of tagsInput overwrite them with its own values. I have also added a preventDefault to the fake_input keypress event as I had some form submitting issues when using the plugin and "Optimized" the tagExist method.	2011-07-12 21:17:30 +01:00
Sebastian Motraghi	f40465718b	version bump	2011-06-29 12:10:22 -05:00
Sebastian Motraghi	24832798ae	added a note to the readme re: jquery.autocomplete.	2011-06-29 12:10:10 -05:00
Sebastian Motraghi	af2d7d2e84	minify latest set of changes.	2011-06-29 12:09:43 -05:00
Sebastian Motraghi	683637913c	Replace blur bindings with event handlers and parameters specific to the jQuery autocomplete library in use.	2011-06-29 12:06:38 -05:00
Sebastian Motraghi	22cb584ebc	Version bump	2011-06-23 17:06:19 +01:00
Sebastian Motraghi	bf11dcecd0	new minified version	2011-06-23 16:50:22 +01:00
Sebastian Motraghi	1c61ecd45c	fake endpoints for autocomplete testing.	2011-06-23 16:39:02 +01:00
Sebastian Motraghi	6ccb7f1dff	Merge branch 'master' into jaytest	2011-06-23 15:19:00 +01:00
Sebastian Motraghi	bd5a63f2eb	Merge remote-tracking branch 'jaylevitt/master' into jaytest	2011-06-23 14:58:27 +01:00
Jay Levitt	45fcb12091	handle autocompleteselected event properly, add placeholderColor setting	2011-06-09 11:25:50 -04:00
Maxime Corson	707bf84ee5	Add the minified version for the fix	2011-06-07 02:53:33 -07:00
Maxime Corson	7d9854a3bb	Fix bug : now, when you delete the last character of a new tag, the previous tag is not removed.	2011-06-07 02:51:19 -07:00
Sebastian Motraghi	240f4274a0	bump to version 1.2.5	2011-06-02 09:37:48 +01:00
Sebastian Motraghi	14a01fa89f	minified punytan's changes.	2011-06-02 09:32:54 +01:00
punytan	9b584de09a	fix the problem around unsafe chars	2011-06-01 20:23:46 +09:00
Jay Levitt	d8d8df71cf	Teach tagsinput to use JQuery UI's built-in autocomplete	2011-05-27 12:38:12 -04:00
Sebastian Motraghi	4f22220a36	update docs; bump version number	2011-05-25 15:40:36 +01:00
Sebastian Motraghi	8382bfc7f6	new minified version	2011-05-25 15:40:20 +01:00
Sebastian Motraghi	c5e24d6c89	onChange / removeWithBackspace documentation	2011-05-25 15:26:12 +01:00
Sebastian Motraghi	238c8e7fa6	wrap README lines	2011-05-25 15:25:38 +01:00
Sebastian Motraghi	ef581e695a	Merge pull request #9 from sebm/master Incorporate @marioestrada's onChange / backspace changes	2011-05-25 07:06:09 -07:00
Sebastian Motraghi	082acc53de	Call the 'onChange' function when a tag is added.	2011-05-25 14:57:03 +01:00
Mario Estrada	fd1e79202f	added new test for onChange, changed functionality to send the generated tag element and the original input to onChange	2011-05-24 19:36:05 -05:00
Mario Estrada	074d90a6c7	removed extra whitespace	2011-05-24 19:23:13 -05:00
Mario Estrada	8c45811838	Replace jQuery.fn with $.fn since it is already wrapped, added onChange to be called after adding or removing a tag	2011-05-24 19:22:06 -05:00
Mario Estrada	74520e1cbb	Added support for remove tack with backspace	2011-05-20 19:29:57 -05:00
Ben Brown	ba418a2092	Bug fix pertaining to over-escaping tags.	2011-04-28 16:49:49 -05:00
Ben Brown	e227153125	Minified.	2011-04-28 16:09:17 -05:00
Ben Brown	86870134fb	Adds the 'interactive' parameter, defaulted to true. If interactive==true, an input will be inserted, allowing users to type new tags. If interactive==false, no input will be inserted, and tags must be added using the addTags function.	2011-04-28 16:08:01 -05:00
Ben Brown	0844f11939	Updated minified version	2011-04-28 15:09:21 -05:00
Ben Brown	1dbfe86a79	Options	2011-04-28 15:08:14 -05:00
Ben Brown	0a94827e4d	Merge branch 'master' of github.com:xoxco/jQuery-Tags-Input	2011-04-28 15:07:45 -05:00
Ben Brown	823a8b411e	Only call addTag once, BEN.	2011-04-28 15:05:20 -05:00
Ben Brown	64e9860eff	When importing tags, do NOT call the callback.	2011-04-28 15:02:06 -05:00
Ben Brown	8ea9b4ea92	Store the callback functions for later.	2011-04-28 15:01:08 -05:00
Ben Brown	bfbc3181f2	If an onRemoveTag callback has been specified, call it	2011-04-28 15:00:50 -05:00
Ben Brown	0e4af3b60c	If a callback has been specified, call it when a tag is added.	2011-04-28 15:00:27 -05:00
Ben Brown	375b385f46	Store the callbacks	2011-04-28 15:00:00 -05:00
Ben Brown	1505a5d6b0	By default, if a callback has been specified, call it!	2011-04-28 14:59:44 -05:00
Ben Brown	fbdaf2e84c	Added sample onAddTag and onRemoveTag callbacks.	2011-04-28 14:59:12 -05:00
Ben Brown	8a67752cb4	Added info for new callback function parameters	2011-04-28 14:58:58 -05:00
Ben Brown	c5637bf1f0	Merged pull request #3 from devbrothers/master. Added minified version.	2011-04-26 16:03:20 -07:00
Bartosz Grzybowski	b2811f6f87	added minified version	2011-04-19 12:47:41 +02:00
melkorm	ec21d648fb	Bumped version. Okey, so I did a bit dirty fix for this that if autocomplete popup is visible then blur doesn not tak an action, otherwise adds a new tag. Also added unique option to second blur (with autocomplete).	2011-04-18 10:47:57 -07:00
melkorm	613859b0f0	README + 2 new options.	2011-04-17 04:30:21 -07:00
melkorm	8330eb7cba	Added two options: 1. minChars 2. maxChars Also fixed a bug (I hope so it was one) when using autocomplete, on pressing enter two tags were added: 1st : what we typed 2hnd : what autocomplete returned.	2011-04-16 10:16:38 -07:00
Ben Brown	274563670f	bump version number	2011-04-14 10:56:10 -05:00
Ben Brown	9d927ccc6f	Add test.html, which includes, get this, a test of jquery tagsinput.	2011-04-14 10:53:42 -05:00
Ben Brown	9fd4b31b05	changed tab style, and added default value to new unique flag	2011-04-14 10:53:23 -05:00
Erlend Finvåg	3bf0e47ea5	fixed bug I accedently introduced in previous commit	2011-04-14 16:36:38 +02:00
Erlend Finvåg	e3fdc8bc84	added the ability to require unique tags	2011-04-14 16:12:04 +02:00
Ben Brown	72227771f2	Bump version number	2011-04-12 18:11:06 -05:00
Ben Brown	99bf360110	Add uid=501(benbrown) gid=501(benbrown) groups=501(benbrown),204(_developer),100(_lpoperator),98(_lpadmin),80(admin),61(localaccounts),12(everyone),401(com.apple.access_screensharing-disabled).importtags('list,of,tags');	2011-04-12 17:52:52 -05:00
Ben Brown	cb6250d5c2	Initial import into Git	2011-04-12 17:40:07 -05:00
				`@@ -1 +0,0 @@`
				{"name":"Jquery-tags-input","body":"# jQuery Tags Input Plugin \r\n\r\nDo you use tags to organize content on your site? \r\nThis plugin will turn your boring tag list into a \r\nmagical input that turns each tag into a style-able \r\nobject with its own delete link. The plugin handles \r\nall the data - your form just sees a comma-delimited \r\nlist of tags!\r\n\r\n[Get it from Github](https://github.com/xoxco/jQuery-Tags-Input)\r\n\r\n[View Demo](http://xoxco.com/projects/code/tagsinput/)\r\n\r\nCreated by [XOXCO](http://xoxco.com)\r\n\r\n\r\n## Instructions\r\n\r\nFirst, add the Javascript and CSS files to your <head> tag:\r\n\r\n\t<script src=\"jquery.tagsinput.js\"></script>\r\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"jquery.tagsinput.css\" />\r\n\r\nCreate a real input in your form that will contain a comma-separated list of \r\ntags. You can put any default or existing tags in the value attribute, and \r\nthey'll be handled properly.\r\n\r\n\t<input name=\"tags\" id=\"tags\" value=\"foo,bar,baz\" />\r\n\r\nThen, simply call the tagsInput function on any field that should be treated as\r\na list of tags.\r\n\r\n\t$('#tags').tagsInput();\r\n\r\nIf you want to use jQuery.autocomplete, you can pass in a parameter with the \r\nautocomplete url.\r\n\r\n\t$('#tags').tagsInput({\r\n\t autocomplete_url:'http://myserver.com/api/autocomplete'\r\n\t});\r\n\r\nIf you're using the bassistance jQuery.autocomplete, which takes extra \r\nparameters, you can also send in options to the autocomplete plugin, as \r\ndescribed here.\r\n\r\n\t$('#tags').tagsInput({ \r\n\t autocomplete_url:'http://myserver.com/api/autocomplete',\r\n\t autocomplete:{selectFirst:true,width:'100px',autoFill:true}\r\n\t});\r\n\r\nYou can add and remove tags by calling the addTag() and removeTag() functions.\r\n\r\n\t$('#tags').addTag('foo');\r\n\t$('#tags').removeTag('bar');\r\n\r\nYou can import a list of tags using the importTags() function...\r\n\r\n\t$('#tags').importTags('foo,bar,baz');\r\n\r\nYou can also use importTags() to reset the tag list...\r\n\r\n\t$('#tags').importTags('');\r\n\r\nAnd you can check if a tag exists using tagExist()...\r\n\r\n\tif ($('#tags').tagExist('foo')) { ... }\r\n\r\nIf additional functionality is required when a tag is added or removed, you may\r\nspecify callback functions via the onAddTag and onRemoveTag parameters. Both \r\nfunctions should accept a single tag as the parameter.\r\n\r\nIf you do not want to provide a way to add tags, or you would prefer to provide \r\nan alternate interface for adding tags to the box, you may pass an false into \r\nthe optional 'interactive' parameter. The tags will still be rendered as per \r\nusual, and the addTag and removeTag functions will operate as expected. \r\n\r\nIf you want a function to be called every time a tag is updated/deleted, set it\r\nas the 'onChange' option.\r\n\r\nBy default, if the cursor is immediately after a tag, hitting backspace will \r\ndelete that tag. If you want to override this, set the 'removeWithBackspace' \r\noption to false.\r\n\r\n## Options\r\n\r\n\t$(selector).tagsInput({\r\n\t 'autocomplete_url': url_to_autocomplete_api,\r\n\t 'autocomplete': { option: value, option: value},\r\n\t 'height':'100px',\r\n\t 'width':'300px',\r\n\t 'interactive':true,\r\n\t 'defaultText':'add a tag',\r\n\t 'onAddTag':callback_function,\r\n\t 'onRemoveTag':callback_function,\r\n\t 'onChange' : callback_function,\r\n\t 'removeWithBackspace' : true,\r\n\t 'minChars' : 0,\r\n\t 'maxChars' : 0 //if not provided there is no limit,\r\n\t 'placeholderColor' : '#666666'\r\n\t});","tagline":"Magically convert a simple text input into a cool tag list with this jQuery plugin.","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}
				`@@ -0,0 +1 @@`
				[ { "id": "Netta rufina", "label": "Red-crested Pochard", "value": "Red-crested Pochard" }, { "id": "Sterna sandvicensis", "label": "Sandwich Tern", "value": "Sandwich Tern" }, { "id": "Saxicola rubetra", "label": "Whinchat", "value": "Whinchat" }, { "id": "Saxicola rubicola", "label": "European Stonechat", "value": "European Stonechat" }, { "id": "Lanius senator", "label": "Woodchat Shrike", "value": "Woodchat Shrike" }, { "id": "Coccothraustes coccothraustes", "label": "Hawfinch", "value": "Hawfinch" }, { "id": "Ficedula hypoleuca", "label": "Eurasian Pied Flycatcher", "value": "Eurasian Pied Flycatcher" }, { "id": "Sitta europaea", "label": "Eurasian Nuthatch", "value": "Eurasian Nuthatch" }, { "id": "Pyrrhula pyrrhula", "label": "Eurasian Bullfinch", "value": "Eurasian Bullfinch" }, { "id": "Muscicapa striata", "label": "Spotted Flycatcher", "value": "Spotted Flycatcher" }, { "id": "Carduelis chloris", "label": "European Greenfinch", "value": "European Greenfinch" }, { "id": "Carduelis carduelis", "label": "European Goldfinch", "value": "European Goldfinch" } ]