Autocomplete: Refactored code for array filtering into $.ui.autocomplete.filter, used by remote-with-cache and modified multiple-demo (now with local data); added multiple-remote to also show multiple with remote data

author: jzaefferer <joern.zaefferer@gmail.com> 2010-04-16 11:05:35 +0200
committer: jzaefferer <joern.zaefferer@gmail.com> 2010-04-16 11:05:35 +0200
commit: dbc9addfae0c9a2aee2d4a1833b2b1d3ba83f8de (patch)
tree: 0bc04f8f3728b660b37655c2166a7648c6574f3c /demos
parent: cddf2a45da7195fadbe17353917cd086831c4313 (diff)
download: jquery-ui-dbc9addfae0c9a2aee2d4a1833b2b1d3ba83f8de.tar.gz
jquery-ui-dbc9addfae0c9a2aee2d4a1833b2b1d3ba83f8de.zip
4 files changed, 87 insertions, 18 deletions
diff --git a/demos/autocomplete/index.html b/demos/autocomplete/index.html
index 0c92d19b4..c7b720784 100644
--- a/demos/autocomplete/index.html
+++ b/demos/autocomplete/index.html
@@ -18,6 +18,7 @@
 			<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
new file mode 100644
index 000000000..5e0f4b50b
--- /dev/null
+++ 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
index 5e0f4b50b..908cfe6ce 100644
--- a/demos/autocomplete/multiple.html
+++ b/demos/autocomplete/multiple.html
@@ -12,6 +12,7 @@
 	<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*/);
 		}
@@ -19,18 +20,11 @@
 			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
index 3688365d4..a00c741e4 100644
--- 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",
author	jzaefferer <joern.zaefferer@gmail.com>	2010-04-16 11:05:35 +0200
committer	jzaefferer <joern.zaefferer@gmail.com>	2010-04-16 11:05:35 +0200
commit	dbc9addfae0c9a2aee2d4a1833b2b1d3ba83f8de (patch)
tree	0bc04f8f3728b660b37655c2166a7648c6574f3c /demos
parent	cddf2a45da7195fadbe17353917cd086831c4313 (diff)
download	jquery-ui-dbc9addfae0c9a2aee2d4a1833b2b1d3ba83f8de.tar.gz jquery-ui-dbc9addfae0c9a2aee2d4a1833b2b1d3ba83f8de.zip