1 files changed, 76 insertions, 0 deletions
diff --git a/static/development-bundle/demos/autocomplete/multiple-remote.html b/static/development-bundle/demos/autocomplete/multiple-remote.html
new file mode 100644
index 0000000..abe028c
--- /dev/null
+++ b/static/development-bundle/demos/autocomplete/multiple-remote.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Autocomplete - Multiple, remote</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.4.3.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.autocomplete.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
+	</style>
+	<script>
+	$(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>