#13: finished

Author: underovsky

example.html

@@ -9,7 +9,9 @@
 		<link rel="stylesheet" type="text/css" href="src/jquery.tagsinput-revisited.css" />
 
 		<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
-		<script type="text/javascript" src="src/jquery.tagsinput-revisited.js"></script>
+		<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
+		
+		<script src="src/jquery.tagsinput-revisited.js"></script>
 
 		<style>
 			body, html {
@@ -33,8 +35,14 @@
 			<label>Tags input with various validation:</label>
 			<input id="form-tags-3" name="tags-3" type="text" value="">
 
-			<!-- TODO: autocomplete -->
-			<!-- TODO: different delimiter -->
+			<label>Tags input with autocomplete:</label>
+			<input id="form-tags-4" name="tags-4" type="text" value="">
+			
+			<label>Tags input with semicolon delimiter:</label>
+			<input id="form-tags-5" name="tags-4" type="text" value="foo;bar">
+			
+			<label>Tags input with array of delimiters (comma and semicolon):</label>
+			<input id="form-tags-6" name="tags-4" type="text" value="foo;bar">
 		</form>
 
 		<script type="text/javascript">
@@ -54,11 +62,24 @@
 				});
 
 				$('#form-tags-3').tagsInput({
+					'unique': true,
 					'minChars': 2,
 					'maxChars': 10,
 					'limit': 5,
 					'validationPattern': new RegExp('^[a-zA-Z]+$')
 				});
+				
+				$('#form-tags-4').tagsInput({
+					'autocomplete_url': 'test/fake_json_endpoint.html' 
+				});
+				
+				$('#form-tags-5').tagsInput({
+					'delimiter': ';' 
+				});
+				
+				$('#form-tags-6').tagsInput({
+					'delimiter': [',', ';'] 
+				});
 			});
 		</script>
 	</body>

src/jquery.tagsinput-revisited.js

@@ -20,7 +20,7 @@
 		this.each(function() {
 			var id = $(this).attr('id');
 
-			var tagslist = $(this).val().split(delimiter[id]);
+			var tagslist = $(this).val().split(_getDelimiter(delimiter[id]));
 			if (tagslist[0] === '') tagslist = [];
 
 			value = jQuery.trim(value);
@@ -69,14 +69,14 @@
 		this.each(function() {
 			var id = $(this).attr('id');
 
-			var old = $(this).val().split(delimiter[id]);
+			var old = $(this).val().split(_getDelimiter(delimiter[id]));
 
 			$('#' + id + '_tagsinput .tag').remove();
 
 			var str = '';
 			for (i = 0; i < old.length; ++i) {
 				if (old[i] != value) {
-					str = str + delimiter[id] + old[i];
+					str = str + _getDelimiter(delimiter[id]) + old[i];
 				}
 			}
 
@@ -93,7 +93,7 @@
 
 	$.fn.tagExist = function(val) {
 		var id = $(this).attr('id');
-		var tagslist = $(this).val().split(delimiter[id]);
+		var tagslist = $(this).val().split(_getDelimiter(delimiter[id]));
 		return (jQuery.inArray(val, tagslist) >= 0);
 	};
 
@@ -131,7 +131,7 @@
 			if (settings.hide) $(this).hide();
 
 			var id = $(this).attr('id');
-			if (!id || delimiter[$(this).attr('id')]) {
+			if (!id || _getDelimiter(delimiter[$(this).attr('id')])) {
 				id = $(this).attr('id', 'tags' + new Date().getTime() + (uniqueIdCounter++)).attr('id');
 			}
 
@@ -178,6 +178,10 @@
 				$(this).addClass('focus');
 			});
 
+			$(data.fake_input).on('focus', data, function(event) {
+				$(data.holder).addClass('focus');
+			});
+			
 			$(data.fake_input).on('blur', data, function(event) {
 				$(data.holder).removeClass('focus');
 			});
@@ -260,7 +264,7 @@
 				value = value.replace(/\n/g, '');
 				value = value.replace(/\s/g, '');
 
-				var tags = _splitIntoTags(event, value);
+				var tags = _splitIntoTags(event.data.delimiter, value);
 
 				if (tags.length > 0) {
 					for (var i = 0; i < tags.length; ++i) {
@@ -304,14 +308,14 @@
 
 	$.fn.tagsInput.updateTagsField = function(obj, tagslist) {
 		var id = $(obj).attr('id');
-		$(obj).val(tagslist.join(delimiter[id]));
+		$(obj).val(tagslist.join(_getDelimiter(delimiter[id])));
 	};
 
 	$.fn.tagsInput.importTags = function(obj, val) {
 		$(obj).val('');
 
 		var id = $(obj).attr('id');
-		var tags = val.split(delimiter[id]);
+		var tags = _splitIntoTags(delimiter[id], val); 
 
 		for (i = 0; i < tags.length; ++i) {
 			$(obj).addTag(tags[i], {
@@ -330,6 +334,16 @@
 		}
 	};
 
+	var _getDelimiter = function(delimiter) {
+		if (typeof delimiter === 'undefined') {
+			return delimiter;
+		} else if (typeof delimiter === 'string') {
+			return delimiter;
+		} else {
+			return delimiter[0];
+		}
+	};
+	
 	var _validateTag = function(value, options, tagslist) {
 		var result = true;
 
@@ -364,29 +378,32 @@
 		return found;
 	 };
 
-	 var _splitIntoTags = function(event, value) {
+	 var _splitIntoTags = function(delimiter, value) {
 		 if (value === '') return [];
 
-		 var tags;
-		 if (typeof event.data.delimiter === 'string') {
-			 tags = value.split(event.data.delimiter);
+		 if (typeof delimiter === 'string') {
+			 var tags = value.split(delimiter);
 
 			 if (tags.length > 1) {
 				 return tags;
 			 } else {
 				 return [];
 			 }
 		 } else {
-			 $.each(event.data.delimiter, function(index, delimiter) {
-				 tags = value.split(delimiter);
-				 if (tags.length > 1) {
-					 return false;
-				 } else {
-					 tags = [];
-				 }
+			 var tmpDelimiter = '∞';
+			 var text = value;
+			 
+			 $.each(delimiter, function(index, _delimiter) {
+				 text = text.split(_delimiter).join(tmpDelimiter);
 			 });
 
-			 return tags;
+			 var tags = text.split(tmpDelimiter);
+			 
+			 if (tags.length > 1) {
+				 return tags;
+			 } else {
+				 return [];
+			 }
 		 }
 
 		 return [];