Autocomplete: Refactored code for array filtering into $.ui.autocompl…

…ete.filter, used by remote-with-cache and modified multiple-demo (now with local data); added multiple-remote to also show multiple with remote data
jquery · Apr 16, 2010 · dbc9add · dbc9add
1 parent cddf2a4
commit dbc9add
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 23 deletions.
diff --git a/demos/autocomplete/index.html b/demos/autocomplete/index.html
@@ -18,6 +18,7 @@ <h4>Examples</h4>
 			<li><a href="xml.html">XML data parsed once</a></li>
 			<li><a href="categories.html">Categories</a></li>
 			<li><a href="multiple.html">Multiple values</a></li>
+			<li><a href="multiple.html">Multiple, remote</a></li>
 		</ul>
 	</div>
 </body>

diff --git a/demos/autocomplete/multiple-remote.html b/demos/autocomplete/multiple-remote.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<title>jQuery UI Autocomplete multiple demo</title>
+	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
+	<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
+	<script type="text/javascript">
+	$(function() {
+		function split(val) {
+			return val.split(/,\s*/);
+		}
+		function extractLast(term) {
+			return split(term).pop();
+		}
+
+		$("#birds").autocomplete({
+			source: function(request, response) {
+				$.getJSON("search.php", {
+					term: extractLast(request.term)
+				}, response);
+			},
+			search: function() {
+				// custom minLength
+				var term = extractLast(this.value);
+				if (term.length < 2) {
+					return false;
+				}
+			},
+			focus: function() {
+				// prevent value inserted on focus
+				return false;
+			},
+			select: function(event, ui) {
+				var terms = split( this.value );
+				// remove the current input
+				terms.pop();
+				// add the selected item
+				terms.push( ui.item.value );
+				// add placeholder to get the comma-and-space at the end
+				terms.push("");
+				this.value = terms.join(", ");
+				return false;
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="demo">
+
+<div class="ui-widget">
+	<label for="birds">Birds: </label>
+	<input id="birds" size="50" />
+</div>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+<p>
+Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.
+</p>
+<p>
+This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.
+</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/demos/autocomplete/multiple.html b/demos/autocomplete/multiple.html
@@ -12,25 +12,19 @@
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$(function() {
+		var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
 		function split(val) {
 			return val.split(/,\s*/);
 		}
 		function extractLast(term) {
 			return split(term).pop();
 		}
 
-		$("#birds").autocomplete({
+		$("#tags").autocomplete({
+			minLength: 0,
 			source: function(request, response) {
-				$.getJSON("search.php", {
-					term: extractLast(request.term)
-				}, response);
-			},
-			search: function() {
-				// custom minLength
-				var term = extractLast(this.value);
-				if (term.length < 2) {
-					return false;
-				}
+				// delegate back to autocomplete, but extract the last term
+				response($.ui.autocomplete.filter(availableTags, extractLast(request.term)));
 			},
 			focus: function() {
 				// prevent value inserted on focus
@@ -56,15 +50,15 @@
 <div class="demo">
 
 <div class="ui-widget">
-	<label for="birds">Birds: </label>
-	<input id="birds" size="50" />
+	<label for="tags">Tag programming languages: </label>
+	<input id="tags" size="50" />
 </div>
 
 </div><!-- End demo -->
 
 <div class="demo-description">
 <p>
-Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.
+Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.
 </p>
 <p>
 This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.

diff --git a/demos/autocomplete/remote-with-cache.html b/demos/autocomplete/remote-with-cache.html
@@ -22,12 +22,11 @@
 			source: function(request, response) {
 				if (cache.term == request.term && cache.content) {
 					response(cache.content);
+					return;
 				}
 				if (new RegExp(cache.term).test(request.term) && cache.content && cache.content.length < 13) {
-					var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
-					response($.grep(cache.content, function(value) {
-	    				return matcher.test(value.value)
-					}));
+					response($.ui.autocomplete.filter(cache.content, request.term));
+					return;
 				}
 				$.ajax({
 					url: "search.php",

diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js
@@ -166,11 +166,7 @@ $.widget( "ui.autocomplete", {
 		if ( $.isArray(this.options.source) ) {
 			array = this.options.source;
 			this.source = function( request, response ) {
-				// escape regex characters
-				var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
-				response( $.grep( array, function(value) {
-					return matcher.test( value.label || value.value || value );
-				}) );
+				response( $.ui.autocomplete.filter(array, request.term) );
 			};
 		} else if ( typeof this.options.source === "string" ) {
 			url = this.options.source;
@@ -308,6 +304,12 @@ $.widget( "ui.autocomplete", {
 $.extend( $.ui.autocomplete, {
 	escapeRegex: function( value ) {
 		return value.replace( /([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1" );
+	},
+	filter: function(array, term) {
+		var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );
+		return $.grep( array, function(value) {
+			return matcher.test( value.label || value.value || value );
+		});
 	}
 });