if the setting's unique be true,tag should be case sensitive.

Add link to jsFiddle to readme.
Merge pull request #37 from devbrothers/master
2026-08-09 21:06:43 +10:00 · 2012-12-13 13:37:50 +08:00 · 2012-05-10 12:44:39 -07:00 · 2012-04-11 13:44:40 -07:00 · 2012-04-11 13:43:57 -07:00 · 2012-04-11 13:23:36 -07:00
4 changed files with 71 additions and 84 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,65 @@ 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/)
+
+[Test it yourself using this jsFiddle Demo](http://jsfiddle.net/7aDak/)
+
+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 +83,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'
+	});
@@ -1,12 +1,7 @@
-<!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" />
+
+	<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="jquery.tagsinput.js"></script>
+	<script type="text/javascript" src="http://xoxco.com/projects/code/tagsinput/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>
@@ -31,8 +26,9 @@
 		
 		$(function() {

-			$('#tags_1').tagsInput();
+			$('#tags_1').tagsInput({width:'auto'});
 			$('#tags_2').tagsInput({
+				width: 'auto',
 				onChange: function(elem, elem_tags)
 				{
 					var languages = ['php','ruby','javascript'];
@@ -44,6 +40,8 @@
 				}
 			});
 			$('#tags_3').tagsInput({
+				width: 'auto',
+
 				//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
 			});
@@ -57,23 +55,14 @@
 		});
 	
 	</script>
-	
-</head>
-<body>
-	<header>
-		jQuery Tags Input!
-	</header>	
-	<section>	
 		<form>
-			<input id="tags_1" type="text" class="tags" value="foo,bar,baz,roffle" />
+			<p><label>Defaults:</label>
+			<input id="tags_1" type="text" class="tags" value="foo,bar,baz,roffle" /></p>
 			
-			<label>Technologies: (Programming languages in yellow)</label>
-			<input id="tags_2" type="text" class="tags" value="php,ios,javascript,ruby,android,kindle" />
+			<p><label>Technologies: (Programming languages in yellow)</label>
+			<input id="tags_2" type="text" class="tags" value="php,ios,javascript,ruby,android,kindle" /></p>
 			
-			<label>Autocomplete:</label>
-			<input id='tags_3' type='text' class='tags'>
+			<p><label>Autocomplete:</label>
+			<input id='tags_3' type='text' class='tags'></p>
 			
-		</form>
-	</section>
-
-</body>
+		</form>
@@ -1,6 +1,6 @@
 /*

-	jQuery Tags Input Plugin 1.3.2
+	jQuery Tags Input Plugin 1.3.3
 	
 	Copyright (c) 2011 XOXCO, Inc
 	
@@ -86,7 +86,7 @@
 				value = jQuery.trim(value);
 		
 				if (options.unique) {
-					var skipTag = $(tagslist).tagExist(value);
+					var skipTag = $(this).tagExist(value);
 					if(skipTag == true) {
 					    //Marks fake input as not_valid to let styling it
    				    $('#'+id+'_tag').addClass('not_valid');
@@ -162,9 +162,12 @@
 		};
 	
 	$.fn.tagExist = function(val) {
-		return (jQuery.inArray(val, $(this)) >= 0); //true when tag exists, false when not
+		var id = $(this).attr('id');
+		val = val.toLowerCase();
+		var tagslist = $(this).val().toLowerCase().split(delimiter[id]);
+		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');
@@ -187,15 +190,17 @@
      placeholderColor:'#666666',
      autosize: true,
      comfortZone: 20,
-      inputPadding: 6*2,
+      inputPadding: 6*2
    },options);

 		this.each(function() { 
 			if (settings.hide) { 
 				$(this).hide();				
 			}
-				
-			var id = $(this).attr('id')
+			var id = $(this).attr('id');
+			if (!id || delimiter[$(this).attr('id')]) {
+				id = $(this).attr('id', 'tags' + new Date().getTime()).attr('id');
+			}
 			
 			var data = jQuery.extend({
 				pid:id,
@@ -225,7 +230,8 @@
 			$(markup).insertAfter(this);

 			$(data.holder).css('width',settings.width);
-			$(data.holder).css('height',settings.height);
+			$(data.holder).css('min-height',settings.height);
+			$(data.holder).css('height','100%');
 	
 			if ($(data.real_input).val()!='') { 
 				$.fn.tagsInput.importTags($(data.real_input),$(data.real_input).val());
@@ -321,7 +327,6 @@
 				    });
 				}
 			} // if settings.interactive
-			return false;
 		});
 			
 		return this;
Author	SHA1	Message	Date
junv	291739bd50	if the setting's unique be true,tag should be case sensitive.	2012-12-13 13:37:50 +08:00
Ben Brown	e27248adde	Add link to jsFiddle to readme.	2012-05-10 12:44:39 -07: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
Tomasz Tybulewicz	b56a968f97	Fixed issue #49 - tagExist() now works correctly	2012-03-13 19:59:46 +01: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