Autocomplete

Author: underovsky

README.md

@@ -45,24 +45,11 @@ Then, simply call the tagsInput function on any field that should be treated as
 $('.tagsinput').tagsInput();
 ```
 
-If you want to use jQuery.autocomplete, you can pass in a parameter with the autocomplete url.
+If you want to use jQuery.autocomplete, you can pass an object with autocomplete options (https://jqueryui.com/autocomplete/).
 
 ```
 $('.tagsinput').tagsInput({
-  autocomplete_url: 'URL'
-});
-```
-
-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.
-
-```
-$('.tagsinput#tags').tagsInput({
-  autocomplete_url: 'URL',
-  autocomplete: {
-    selectFirst: true,
-    width: '100px',
-    autoFill: true
-  }
+  autocomplete: {option: value, option: value}
 });
 ```
 
@@ -116,7 +103,6 @@ $('.tagsinput#tags').tagsInput({
   width: '300px', // standard option is 'auto'
   height: '100px', // standard option is 'auto'
   autocomplete: { option: value, option: value},
-  autocomplete_url: 'URL',
   hide: true,
   delimiter: [',',';'], // or a string with a single delimiter. Ex: ';'
   unique: true,

dist/jquery.tagsinput-revisited.min.js

@@ -6,12 +6,12 @@
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 
-		<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 src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
+		<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
 
 		<script src="src/jquery.tagsinput-revisited.js"></script>
+		<link rel="stylesheet" href="src/jquery.tagsinput-revisited.css" />
 
 		<style>
 			body, html {
@@ -70,7 +70,14 @@
 				});
 
 				$('#form-tags-4').tagsInput({
-					'autocomplete_url': 'test/fake_json_endpoint.html' 
+					'autocomplete': {
+						source: [
+							'Apple',
+							'Banana',
+							'Orange',
+							'Pizza'
+						]
+					} 
 				});
 
 				$('#form-tags-5').tagsInput({

example.html

@@ -113,8 +113,7 @@
 			validationPattern: null,
 			width: 'auto',
 			height: 'auto',
-			autocomplete: {selectFirst: false},
-			autocomplete_url: null,
+			autocomplete: null,
 			hide: true,
 			delimiter: ',',
 			unique: true,
@@ -190,42 +189,24 @@
 				$(data.holder).removeClass('focus');
 			});
 
-			if (settings.autocomplete_url !== null) {
-				var 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).on('result', data, function(event, data, formatted) {
-						if (data) {
-							$('#' + id).addTag(data[0] + "", {
-								focus: true,
-								unique: settings.unique,
-								minChars: settings.minChars,
-								maxChars: settings.maxChars,
-								limit: settings.limit,
-								validationPattern: settings.validationPattern
-							});
-						}
-					});
-				} else if (jQuery.ui.autocomplete !== undefined) {
-					$(data.fake_input).autocomplete(autocomplete_options);
-					$(data.fake_input).on('autocompleteselect', data, function(event, ui) {
-						$(event.data.real_input).addTag(ui.item.value, {
-							focus: true,
-							unique: settings.unique,
-							minChars: settings.minChars,
-							maxChars: settings.maxChars,
-							limit: settings.limit,
-							validationPattern: settings.validationPattern
-						});
-						
-						return false;
+			if (settings.autocomplete !== null && jQuery.ui.autocomplete !== undefined) {
+				$(data.fake_input).autocomplete(settings.autocomplete);
+				$(data.fake_input).on('autocompleteselect', data, function(event, ui) {
+					$(event.data.real_input).addTag(ui.item.value, {
+						focus: true,
+						unique: settings.unique,
+						minChars: settings.minChars,
+						maxChars: settings.maxChars,
+						limit: settings.limit,
+						validationPattern: settings.validationPattern
 					});
-				}
+					
+					return false;
+				});
+				
+				$(data.fake_input).on('keypress', data, function(event) {
+					$(this).autocomplete("close");
+				});
 			} else {
 				$(data.fake_input).on('blur', data, function(event) {
 					$(event.data.real_input).addTag($(event.data.fake_input).val(), {
@@ -305,8 +286,8 @@
 
 			// Removes the error class when user changes the value of the fake input
 			$(data.fake_input).keydown(function(event) {
-				// alt, shift, esc, ctrl and arrows keys are ignored
-				if (jQuery.inArray(event.keyCode, [37, 38, 39, 40, 27, 16, 17, 18, 225]) === -1) {
+				// enter, alt, shift, esc, ctrl and arrows keys are ignored
+				if (jQuery.inArray(event.keyCode, [13, 37, 38, 39, 40, 27, 16, 17, 18, 225]) === -1) {
 					$(this).removeClass('error');
 				}
 			});