Modify jquery.tagsinput plugin to allow filtering tags, and filter tags by…

Modify jquery.tagsinput plugin to allow filtering tags, and filter tags by converting them to lowercase so the service doesn't just error when you submit.

lms/static/coffee/src/discussion/utils.coffee

@@ -107,6 +107,9 @@ class @DiscussionUtil
       [event, selector] = eventSelector.split(' ')
       $local(selector).unbind(event)[event] handler
 
+  @processTag: (text) ->
+    text.toLowerCase()
+
   @tagsInputOptions: ->
     autocomplete_url: @urlFor('tags_autocomplete')
     autocomplete:
@@ -116,6 +119,7 @@ class @DiscussionUtil
     width: '100%'
     defaultText: "Tag your post: press enter after each tag"
     removeWithBackspace: true
+    preprocessTag: @processTag
 
   @formErrorHandler: (errorsField) ->
     (xhr, textStatus, error) ->

lms/static/js/jquery.tagsinput.js

 /*
 
 	jQuery Tags Input Plugin 1.3.3
-	
+
 	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
 
@@ -24,9 +24,9 @@
 	        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);
@@ -36,7 +36,7 @@
 	        currentWidth = input.width(),
 	        isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
 	                             || (newWidth > minWidth && newWidth < maxWidth);
-	
+
 	    // Animate width
 	    if (isValidWidthChange) {
 	        input.width(newWidth);
@@ -72,19 +72,24 @@
     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() { 
+			this.each(function() {
 				var id = $(this).attr('id');
 
 				var tagslist = $(this).val().split(delimiter[id]);
-				if (tagslist[0] == '') { 
+				if (tagslist[0] == '') {
 					tagslist = new Array();
 				}
 
 				value = jQuery.trim(value);
-		
+
+				if (options.callback && tags_callbacks[id] && tags_callbacks[id]['preprocessTag']) {
+					var f = tags_callbacks[id]['preprocessTag'];
+					value = f.call(this, value);
+				}
+
 				if (options.unique) {
 					var skipTag = $(this).tagExist(value);
 					if(skipTag == true) {
@@ -92,10 +97,10 @@
     				    $('#'+id+'_tag').addClass('not_valid');
     				}
 				} else {
-					var skipTag = false; 
+					var skipTag = false;
 				}
-				
-				if (value !='' && skipTag != true) { 
+
+				if (value !='' && skipTag != true) {
                     $('<span>').addClass('tag').append(
                         $('<span>').text(value).append('&nbsp;&nbsp;'),
                         $('<a>', {
@@ -108,16 +113,16 @@
                     ).insertBefore('#' + id + '_addTag');
 
 					tagslist.push(value);
-				
+
 					$('#'+id+'_tag').val('');
 					if (options.focus) {
 						$('#'+id+'_tag').focus();
-					} else {		
+					} 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);
@@ -127,29 +132,29 @@
 						var i = tagslist.length;
 						var f = tags_callbacks[id]['onChange'];
 						f.call(this, $(this), tagslist[i-1]);
-					}					
+					}
 				}
-		
-			});		
-			
+
+			});
+
 			return false;
 		};
-		
-	$.fn.removeTag = function(value) { 
+
+	$.fn.removeTag = function(value) {
 			value = unescape(value);
-			this.each(function() { 
+			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) { 
+				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']) {
@@ -157,24 +162,24 @@
 					f.call(this, value);
 				}
 			});
-					
+
 			return false;
 		};
-	
+
 	$.fn.tagExist = function(val) {
 		var id = $(this).attr('id');
 		var tagslist = $(this).val().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');
 		$('#'+id+'_tagsinput .tag').remove();
 		$.fn.tagsInput.importTags(this,str);
 	}
-		
-	$.fn.tagsInput = function(options) { 
+
+	$.fn.tagsInput = function(options) {
     var settings = jQuery.extend({
       interactive:true,
       defaultText:'add a tag',
@@ -192,15 +197,15 @@
       inputPadding: 6*2
     },options);
 
-		this.each(function() { 
-			if (settings.hide) { 
-				$(this).hide();				
+		this.each(function() {
+			if (settings.hide) {
+				$(this).hide();
 			}
 			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,
 				real_input: '#'+id,
@@ -208,57 +213,58 @@
 				input_wrapper: '#'+id+'_addTag',
 				fake_input: '#'+id+'_tag'
 			},settings);
-	
+
 			delimiter[id] = data.delimiter;
-			
-			if (settings.onAddTag || settings.onRemoveTag || settings.onChange) {
+
+			if (settings.onAddTag || settings.onRemoveTag || settings.onChange || settings.preprocessTag) {
 				tags_callbacks[id] = new Array();
 				tags_callbacks[id]['onAddTag'] = settings.onAddTag;
 				tags_callbacks[id]['onRemoveTag'] = settings.onRemoveTag;
 				tags_callbacks[id]['onChange'] = settings.onChange;
+				tags_callbacks[id]['preprocessTag'] = settings.preprocessTag;
 			}
-	
+
 			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('min-height',settings.height);
 			$(data.holder).css('height','100%');
-	
-			if ($(data.real_input).val()!='') { 
+
+			if ($(data.real_input).val()!='') {
 				$.fn.tagsInput.importTags($(data.real_input),$(data.real_input).val());
-			}		
-			if (settings.interactive) { 
+			}
+			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.fake_input).doAutosize(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')) { 
+					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');		
+					$(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]; 
+					for (attrname in settings.autocomplete) {
+						autocomplete_options[attrname] = settings.autocomplete[attrname];
 					}
-				
+
 					if (jQuery.Autocompleter !== undefined) {
             onSelectCallback = settings.autocomplete.onItemSelect;
             settings.autocomplete.onItemSelect = function() {
@@ -278,18 +284,18 @@
 						$(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) { 
+						$(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.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 {
@@ -298,7 +304,7 @@
 							}
 							return false;
 						});
-				
+
 				}
 				// if user types a comma, create a new tag
 				$(data.fake_input).bind('keypress',data,function(event) {
@@ -326,7 +332,7 @@
 					}
 				});
 				$(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){
@@ -337,21 +343,21 @@
 				}
 			} // if settings.interactive
 		});
-			
+
 		return this;
-	
+
 	};
-	
-	$.fn.tagsInput.updateTagsField = function(obj,tagslist) { 
+
+	$.fn.tagsInput.updateTagsField = function(obj,tagslist) {
 		var id = $(obj).attr('id');
 		$(obj).val(tagslist.join(delimiter[id]));
 	};
-	
-	$.fn.tagsInput.importTags = function(obj,val) {			
+
+	$.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++) { 
+		for (i=0; i<tags.length; i++) {
 			$(obj).addTag(tags[i],{focus:false,callback:false});
 		}
 		if(tags_callbacks[id] && tags_callbacks[id]['onChange'])