Version bump

README

@@ -1,4 +1,4 @@
-jQuery Tags Input Plugin 1.2.4
+jQuery Tags Input Plugin 1.3
 
 Copyright (c) 2011 XOXCO, Inc
 
@@ -89,6 +89,7 @@ $(selector).tagsInput({
    'onChange' : callback_function,
    'removeWithBackspace' : true,
    'minChars' : 0,
-   'maxChars' : 0 //if not provided there is no limit
+   'maxChars' : 0 //if not provided there is no limit,
+   'placeholderColor' : '#666666'
 });
 

jquery.tagsinput.js

@@ -1,8 +1,8 @@
 /*
 
-	jQuery Tags Input Plugin 1.2.4
+	jQuery Tags Input Plugin 1.3
 	
-	Copyright (c) 2010 XOXCO, Inc
+	Copyright (c) 2011 XOXCO, Inc
 	
 	Documentation for this plugin lives here:
 	http://xoxco.com/clickable/jquery-tags-input
@@ -18,12 +18,13 @@
 
 	var delimiter = new Array();
 	var tags_callbacks = new Array();
+	var gotAutoComplete = false;
 	
 	$.fn.addTag = function(value,options) {
 			var options = jQuery.extend({focus:false,callback:true},options);
 			this.each(function() { 
 				id = $(this).attr('id');
-	
+
 				var tagslist = $(this).val().split(delimiter[id]);
 				if (tagslist[0] == '') { 
 					tagslist = new Array();
@@ -38,8 +39,17 @@
 				}
 
 				if (value !='' && skipTag != true) { 
-					
-					$('<span class="tag">'+value + '&nbsp;&nbsp;<a href="#" title="Remove tag" onclick="return $(\'#'+id + '\').removeTag(\'' + escape(value) + '\');">x</a></span>').insertBefore('#'+id+'_addTag');
+                    $('<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('');
@@ -109,8 +119,20 @@
 	}
 		
 	$.fn.tagsInput = function(options) { 
-		var settings = jQuery.extend({interactive:true,defaultText:'add a tag',minChars:0,width:'300px',height:'100px','hide':true,'delimiter':',',autocomplete:{selectFirst:false},'unique':true,removeWithBackspace:true},options);
-	
+    var settings = jQuery.extend({
+      interactive:true,
+      defaultText:'add a tag',
+      minChars:0,
+      width:'300px',
+      height:'100px',
+      'hide':true,
+      'delimiter':',',
+      autocomplete:{},
+      'unique':true,
+      removeWithBackspace:true,
+      placeholderColor:'#666666'
+    },options);
+
 		this.each(function() { 
 			if (settings.hide) { 
 				$(this).hide();				
@@ -154,7 +176,7 @@
 			}		
 			if (settings.interactive) { 
 				$(data.fake_input).val($(data.fake_input).attr('data-default'));
-				$(data.fake_input).css('color','#666666');		
+				$(data.fake_input).css('color',settings.placeholderColor);		
 		
 				$(data.holder).bind('click',data,function(event) {
 					$(event.data.fake_input).focus();
@@ -168,23 +190,34 @@
 				});
 						
 				if (settings.autocomplete_url != undefined) {
-					$(data.fake_input).autocomplete(settings.autocomplete_url,settings.autocomplete).bind('result',data,function(event,data,formatted) {
-						if (data) 
-						{
-							$(event.data.real_input).addTag(formatted,{focus:true,unique:(settings.unique)});
-						}
-					});
+				  autocomplete_options = {source: settings.autocomplete_url};
+				  for (attrname in settings.autocomplete) { 
+				    autocomplete_options[attrname] = settings.autocomplete[attrname]; 
+				  }
+          
+					$(data.fake_input).autocomplete(autocomplete_options).bind('autocompleteselect',data,function(event,ui) {
+            gotAutoComplete = true;
+					  $(event.data.real_input).addTag(ui.item.value,{focus:true,unique:(settings.unique)});
+					  return false;
+          });
 					
-					$(data.fake_input).bind('blur',data,function(event) {
-						if( $('.ac_results').is(':visible') ) return false;
-						if ( $(event.data.fake_input).val() != $(event.data.fake_input).attr('data-default')) {
-							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:false,unique:(settings.unique)});						
-						}
-						
-						$(event.data.fake_input).val($(event.data.fake_input).attr('data-default'));
-						$(event.data.fake_input).css('color','#666666');
-						return false;
+					
+          $(data.fake_input).bind('blur',data,function(event) {
+            setTimeout(function() {
+              if(gotAutoComplete == true) {
+                gotAutoComplete = false;
+                return false;
+              }
+              if ( $(event.data.fake_input).val() != $(event.data.fake_input).attr('data-default')) {
+                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:false,unique:(settings.unique)});						
+                }
+              }
+
+              $(event.data.fake_input).val($(event.data.fake_input).attr('data-default'));
+              $(event.data.fake_input).css('color',settings.placeholderColor);              
+            }, 100);
+            return false;
 					});
 			
 				} else {
@@ -197,7 +230,7 @@
 									$(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','#666666');
+								$(event.data.fake_input).css('color',settings.placeholderColor);
 							}
 							return false;
 						});
@@ -213,10 +246,11 @@
 					}
 				});
 				//Delete last tag on backspace
-				data.removeWithBackspace && $(data.fake_input).bind('keyup', function(event)
+				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$/, '');
@@ -252,4 +286,4 @@
 		}
 	};
 
-})(jQuery);
+})(jQuery);

test.html

@@ -7,6 +7,13 @@
 	<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">
@@ -31,6 +38,10 @@
 					});
 				}
 			});
+			$('#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});		
@@ -52,6 +63,10 @@
 			
 			<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>
 

test/fake_json_endpoint.html

@@ -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" } ]

test/fake_plaintext_endpoint.html

@@ -0,0 +1,4 @@
+inky
+pinky
+blinky
+clyde