eol-style and mime-type

author: Richard Worth <rdworth@gmail.com> 2010-01-20 14:00:14 +0000
committer: Richard Worth <rdworth@gmail.com> 2010-01-20 14:00:14 +0000
commit: eecbde22a6b338785ac8e1991858ba7dab976eae (patch)
tree: 11c5e0835757497110151e803bb1e1fb39820dcc /demos/autocomplete
parent: a1e069759ddcd3e56deff0d9334559b156df734c (diff)
download: jquery-ui-eecbde22a6b338785ac8e1991858ba7dab976eae.tar.gz
jquery-ui-eecbde22a6b338785ac8e1991858ba7dab976eae.zip
7 files changed, 496 insertions, 496 deletions
diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html
index a77ff7d61..7ac171b63 100644
--- a/demos/autocomplete/combobox.html
+++ b/demos/autocomplete/combobox.html
@@ -1,126 +1,126 @@
-<!doctype html>
-<html>
-<head>
-	<title>jQuery UI Autocomplete Combobox Demo</title>
-	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.4.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.button.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($) {
-		$.widget("ui.combobox", {
-			_create: function() {
-				var self = this;
-				var select = this.element.hide();
-				var input = $("<input>")
-					.insertAfter(select)
-					.autocomplete({
-						source: function(request, response) {
-							var matcher = new RegExp(request.term, "i");
-							response(select.children("option").map(function() {
-								var text = $(this).text();
-								if (!request.term || matcher.test(text))
-									return {
-										id: $(this).val(),
-										label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
-										value: text
-									};
-							}));
-						},
-						delay: 0,
-						select: function(e, ui) {
-							if (!ui.item) {
-								// remove invalid value, as it didn't match anything
-								$(this).val("");
-								return false;
-							}
-							$(this).focus();
-							select.val(ui.item.id);
-							self._trigger("selected", null, {
-								item: select.find("[value='" + ui.item.id + "']")
-							});
-							
-						},
-						minLength: 0
-					})
-					.removeClass("ui-corner-all")
-					.addClass("ui-corner-left");
-				$("<button>&nbsp;</button>")
-				.insertAfter(input)
-				.button({
-					icons: {
-						primary: "ui-icon-triangle-1-s"
-					},
-					text: false
-				}).removeClass("ui-corner-all")
-				.addClass("ui-corner-right ui-button-icon")
-				.position({
-					my: "left center",
-					at: "right center",
-					of: input,
-					offset: "-1 0"
-				}).css("top", "")
-				.click(function() {
-					// close if already visible
-					if (input.autocomplete("widget").is(":visible")) {
-						input.autocomplete("close");
-						return;
-					}
-					// pass empty string as value to search for, displaying all results
-					input.autocomplete("search", "");
-					input.focus();
-				});
-			}
-		});
-
-	})(jQuery);
-		
-	$(function() {
-		$("select").combobox();
-	});
-	</script>
-	<style>
-		/* TODO shouldn't be necessary */
-		.ui-button-icon-only .ui-button-text { padding: 0; } 
-	</style>
-</head>
-<body>
-	
-<div class="demo">
-
-<div class="ui-widget">
-	<label>Your preferred programming language: </label>
-	<select>
-		<option value="a">asp</option>
-        <option value="c">c</option>
-        <option value="cpp">c++</option>
-        <option value="cf">coldfusion</option>
-        <option value="g">groovy</option>
-        <option value="h">haskell</option>
-        <option value="j">java</option>
-        <option value="js">javascript</option>
-        <option value="p1">pearl</option>
-        <option value="p2">php</option>
-        <option value="p3">python</option>
-        <option value="r">ruby</option>
-        <option value="s">scala</option>
-	</select>
-</div>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-<p>
-A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections.
-</p>
-<p>
-The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.
-</p>
-</div><!-- End demo-description -->
-
-</body>
-</html>
+<!doctype html>
+<html>
+<head>
+	<title>jQuery UI Autocomplete Combobox Demo</title>
+	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+	<script type="text/javascript" src="../../jquery-1.4.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.button.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($) {
+		$.widget("ui.combobox", {
+			_create: function() {
+				var self = this;
+				var select = this.element.hide();
+				var input = $("<input>")
+					.insertAfter(select)
+					.autocomplete({
+						source: function(request, response) {
+							var matcher = new RegExp(request.term, "i");
+							response(select.children("option").map(function() {
+								var text = $(this).text();
+								if (!request.term || matcher.test(text))
+									return {
+										id: $(this).val(),
+										label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
+										value: text
+									};
+							}));
+						},
+						delay: 0,
+						select: function(e, ui) {
+							if (!ui.item) {
+								// remove invalid value, as it didn't match anything
+								$(this).val("");
+								return false;
+							}
+							$(this).focus();
+							select.val(ui.item.id);
+							self._trigger("selected", null, {
+								item: select.find("[value='" + ui.item.id + "']")
+							});
+							
+						},
+						minLength: 0
+					})
+					.removeClass("ui-corner-all")
+					.addClass("ui-corner-left");
+				$("<button>&nbsp;</button>")
+				.insertAfter(input)
+				.button({
+					icons: {
+						primary: "ui-icon-triangle-1-s"
+					},
+					text: false
+				}).removeClass("ui-corner-all")
+				.addClass("ui-corner-right ui-button-icon")
+				.position({
+					my: "left center",
+					at: "right center",
+					of: input,
+					offset: "-1 0"
+				}).css("top", "")
+				.click(function() {
+					// close if already visible
+					if (input.autocomplete("widget").is(":visible")) {
+						input.autocomplete("close");
+						return;
+					}
+					// pass empty string as value to search for, displaying all results
+					input.autocomplete("search", "");
+					input.focus();
+				});
+			}
+		});
+
+	})(jQuery);
+		
+	$(function() {
+		$("select").combobox();
+	});
+	</script>
+	<style>
+		/* TODO shouldn't be necessary */
+		.ui-button-icon-only .ui-button-text { padding: 0; } 
+	</style>
+</head>
+<body>
+	
+<div class="demo">
+
+<div class="ui-widget">
+	<label>Your preferred programming language: </label>
+	<select>
+		<option value="a">asp</option>
+        <option value="c">c</option>
+        <option value="cpp">c++</option>
+        <option value="cf">coldfusion</option>
+        <option value="g">groovy</option>
+        <option value="h">haskell</option>
+        <option value="j">java</option>
+        <option value="js">javascript</option>
+        <option value="p1">pearl</option>
+        <option value="p2">php</option>
+        <option value="p3">python</option>
+        <option value="r">ruby</option>
+        <option value="s">scala</option>
+	</select>
+</div>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+<p>
+A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections.
+</p>
+<p>
+The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.
+</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/demos/autocomplete/custom-data.html b/demos/autocomplete/custom-data.html
index 1b112344b..5be147f29 100644
--- a/demos/autocomplete/custom-data.html
+++ b/demos/autocomplete/custom-data.html
@@ -1,91 +1,91 @@
-<!doctype html>
-<html>
-<head>
-	<title>jQuery UI Autocomplete Custom Data Demo</title>
-	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.4.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" />
-	<style type="text/css">
-	#project-label {
-		display: block;
-		font-weight: bold;
-		margin-bottom: 1em;
-	}
-	#project-icon {
-		float: left;
-		height: 32px;
-		width: 32px;
-	}
-	#project-description {
-		margin: 0;
-		padding: 0;
-	}
-	</style>
-	<script type="text/javascript">
-	$(function() {
-		var projects = [
-			{
-				value: 'jquery',
-				label: 'jQuery',
-				desc: 'the write less, do more, JavaScript library',
-				icon: 'jquery_32x32.png'
-			},
-			{
-				value: 'jquery-ui',
-				label: 'jQuery UI',
-				desc: 'the official user interface library for jQuery',
-				icon: 'jqueryui_32x32.png'
-			},
-			{
-				value: 'sizzlejs',
-				label: 'Sizzle',
-				desc: 'a pure-JavaScript CSS selector engine',
-				icon: 'sizzlejs_32x32.png'
-			}
-		];
-		
-		$('#project').autocomplete({
-			minLength: 0,
-			source: projects,
-			focus: function(event, ui) {
-				$('#project').val(ui.item.label);
-				
-				return false;
-			},
-			select: function(event, ui) {
-				$('#project').val(ui.item.label);
-				$('#project-id').val(ui.item.value);
-				$('#project-description').html(ui.item.desc);
-				$('#project-icon').attr('src', '../images/' + ui.item.icon);
-				
-				return false;
-			}
-		});
-	});
-	</script>
-</head>
-<body>
-
-<div class="demo">
-	<label for="tags" id="project-label">Select a project:</label>
-	<img id="project-icon" src="../images/transparent_1x1.png" class="ui-state-default">
-	<input id="project">
-	<input type="hidden" id="project-id">
-	<p id="project-description"></p>
-</div><!-- End demo -->
-
-<div class="demo-description">
-<p>
-You can use your own custom data formats and displays by simply overriding the default focus and select actions.
-</p>
-<p>
-Try typing "j" to get a list of projects or just press the down arrow.
-</p>
-</div><!-- End demo-description -->
-
-</body>
-</html>
+<!doctype html>
+<html>
+<head>
+	<title>jQuery UI Autocomplete Custom Data Demo</title>
+	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+	<script type="text/javascript" src="../../jquery-1.4.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" />
+	<style type="text/css">
+	#project-label {
+		display: block;
+		font-weight: bold;
+		margin-bottom: 1em;
+	}
+	#project-icon {
+		float: left;
+		height: 32px;
+		width: 32px;
+	}
+	#project-description {
+		margin: 0;
+		padding: 0;
+	}
+	</style>
+	<script type="text/javascript">
+	$(function() {
+		var projects = [
+			{
+				value: 'jquery',
+				label: 'jQuery',
+				desc: 'the write less, do more, JavaScript library',
+				icon: 'jquery_32x32.png'
+			},
+			{
+				value: 'jquery-ui',
+				label: 'jQuery UI',
+				desc: 'the official user interface library for jQuery',
+				icon: 'jqueryui_32x32.png'
+			},
+			{
+				value: 'sizzlejs',
+				label: 'Sizzle',
+				desc: 'a pure-JavaScript CSS selector engine',
+				icon: 'sizzlejs_32x32.png'
+			}
+		];
+		
+		$('#project').autocomplete({
+			minLength: 0,
+			source: projects,
+			focus: function(event, ui) {
+				$('#project').val(ui.item.label);
+				
+				return false;
+			},
+			select: function(event, ui) {
+				$('#project').val(ui.item.label);
+				$('#project-id').val(ui.item.value);
+				$('#project-description').html(ui.item.desc);
+				$('#project-icon').attr('src', '../images/' + ui.item.icon);
+				
+				return false;
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="demo">
+	<label for="tags" id="project-label">Select a project:</label>
+	<img id="project-icon" src="../images/transparent_1x1.png" class="ui-state-default">
+	<input id="project">
+	<input type="hidden" id="project-id">
+	<p id="project-description"></p>
+</div><!-- End demo -->
+
+<div class="demo-description">
+<p>
+You can use your own custom data formats and displays by simply overriding the default focus and select actions.
+</p>
+<p>
+Try typing "j" to get a list of projects or just press the down arrow.
+</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/demos/autocomplete/default.html b/demos/autocomplete/default.html
index 1fbfd2d2a..d0f88859e 100644
--- a/demos/autocomplete/default.html
+++ b/demos/autocomplete/default.html
@@ -1,42 +1,42 @@
-<!doctype html>
-<html>
-<head>
-	<title>jQuery UI Autocomplete Default Demo</title>
-	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.4.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() {
-		var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
-		$("#tags").autocomplete({
-			source: availableTags
-		});
-	});
-	</script>
-</head>
-<body>
-	
-<div class="demo">
-
-<div class="ui-widget">
-	<label for="tags">Tags: </label>
-	<input id="tags" />
-</div>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-<p>
-The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.
-</p>
-<p>
-The datasource is a simple JavaScript array, provided to the widget using the source-option.
-</p>
-</div><!-- End demo-description -->
-
-</body>
-</html>
+<!doctype html>
+<html>
+<head>
+	<title>jQuery UI Autocomplete Default Demo</title>
+	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+	<script type="text/javascript" src="../../jquery-1.4.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() {
+		var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
+		$("#tags").autocomplete({
+			source: availableTags
+		});
+	});
+	</script>
+</head>
+<body>
+	
+<div class="demo">
+
+<div class="ui-widget">
+	<label for="tags">Tags: </label>
+	<input id="tags" />
+</div>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+<p>
+The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.
+</p>
+<p>
+The datasource is a simple JavaScript array, provided to the widget using the source-option.
+</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/demos/autocomplete/index.html b/demos/autocomplete/index.html
index d4cc75038..ffca515e0 100644
--- a/demos/autocomplete/index.html
+++ b/demos/autocomplete/index.html
@@ -1,20 +1,20 @@
-<!doctype html>
-<html lang="en">
-<head>
-	<title>jQuery UI Autocomplete Demos</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-</head>
-<body>
-	<div class="demos-nav">
-		<h4>Examples</h4>
-		<ul>
-			<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
-			<li><a href="remote.html">Remote datasource</a></li>
-			<li><a href="remote-with-cache.html">Remote with caching</a></li>
-			<li><a href="remote-jsonp.html">Remote JSONP datasource</a></li>
-			<li><a href="combobox.html">Combobox</a></li>
-			<li><a href="custom-data.html">Custom data and display</a></li>
-		</ul>
-	</div>
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+	<title>jQuery UI Autocomplete Demos</title>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
+</head>
+<body>
+	<div class="demos-nav">
+		<h4>Examples</h4>
+		<ul>
+			<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
+			<li><a href="remote.html">Remote datasource</a></li>
+			<li><a href="remote-with-cache.html">Remote with caching</a></li>
+			<li><a href="remote-jsonp.html">Remote JSONP datasource</a></li>
+			<li><a href="combobox.html">Combobox</a></li>
+			<li><a href="custom-data.html">Custom data and display</a></li>
+		</ul>
+	</div>
+</body>
+</html>
diff --git a/demos/autocomplete/remote-jsonp.html b/demos/autocomplete/remote-jsonp.html
index 0349e5a2c..46ac87d81 100644
--- a/demos/autocomplete/remote-jsonp.html
+++ b/demos/autocomplete/remote-jsonp.html
@@ -1,85 +1,85 @@
-<!doctype html>
-<html>
-<head>
-	<title>jQuery UI Autocomplete Remote JSONP datasource demo</title>
-	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.4.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 log(message) {
-			$("<div/>").text(message).prependTo("#log");
-			$("#log").attr("scrollTop", 0);
-		}
-		
-		$("#city").autocomplete({
-			source: function(request, response) {
-				$.ajax({
-					url: "http://ws.geonames.org/searchJSON",
-					dataType: "jsonp",
-					data: {
-						featureClass: "P",
-						style: "full",
-						maxRows: 15,
-						name_startsWith: request.term
-					},
-					success: function(data) {
-						response($.map(data.geonames, function(item) {
-							return {
-								label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
-								value: item.name
-							}
-						}))
-					}
-				})
-			},
-			minLength: 2,
-			select: function(event, ui) {
-				log(ui.item ? ("Selected: " + ui.item.label) : "Nothing selected, input was " + this.value);
-			},
-			open: function() {
-				$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
-			},
-			close: function() {
-				$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
-			}
-		});
-	});
-	</script>
-	<style>
-		.ui-autocomplete-loading { background: url(indicator.gif) no-repeat right; }
-		#city { width: 25em; }
-	</style>
-</head>
-<body>
-
-<div class="demo">
-
-<div class="ui-widget">
-	<label for="city">Your city: </label>
-	<input id="city" />
-	Powered by <a href="http://geonames.org">geonames.org</a>
-</div>
-
-<div class="ui-widget" style="margin-top:2em; font-family:Arial">
-	Result:
-	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
-</div>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-<p>
-The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.
-</p>
-<p>
-In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input. 
-</p>
-</div><!-- End demo-description -->
-
-</body>
-</html>
+<!doctype html>
+<html>
+<head>
+	<title>jQuery UI Autocomplete Remote JSONP datasource demo</title>
+	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+	<script type="text/javascript" src="../../jquery-1.4.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 log(message) {
+			$("<div/>").text(message).prependTo("#log");
+			$("#log").attr("scrollTop", 0);
+		}
+		
+		$("#city").autocomplete({
+			source: function(request, response) {
+				$.ajax({
+					url: "http://ws.geonames.org/searchJSON",
+					dataType: "jsonp",
+					data: {
+						featureClass: "P",
+						style: "full",
+						maxRows: 15,
+						name_startsWith: request.term
+					},
+					success: function(data) {
+						response($.map(data.geonames, function(item) {
+							return {
+								label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
+								value: item.name
+							}
+						}))
+					}
+				})
+			},
+			minLength: 2,
+			select: function(event, ui) {
+				log(ui.item ? ("Selected: " + ui.item.label) : "Nothing selected, input was " + this.value);
+			},
+			open: function() {
+				$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
+			},
+			close: function() {
+				$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
+			}
+		});
+	});
+	</script>
+	<style>
+		.ui-autocomplete-loading { background: url(indicator.gif) no-repeat right; }
+		#city { width: 25em; }
+	</style>
+</head>
+<body>
+
+<div class="demo">
+
+<div class="ui-widget">
+	<label for="city">Your city: </label>
+	<input id="city" />
+	Powered by <a href="http://geonames.org">geonames.org</a>
+</div>
+
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
+	Result:
+	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
+</div>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+<p>
+The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.
+</p>
+<p>
+In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input. 
+</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/demos/autocomplete/remote-with-cache.html b/demos/autocomplete/remote-with-cache.html
index aa0fb2eb5..4f470d17b 100644
--- a/demos/autocomplete/remote-with-cache.html
+++ b/demos/autocomplete/remote-with-cache.html
@@ -1,76 +1,76 @@
-<!doctype html>
-<html>
-<head>
-	<title>jQuery UI Autocomplete Remote with caching demo</title>
-	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.4.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 log(message) {
-			$("<div/>").text(message).prependTo("#log");
-			$("#log").attr("scrollTop", 0);
-		}
-		
-		var cache = {};
-		$("#birds").autocomplete({
-			source: function(request, response) {
-				if (cache.term == request.term && cache.content) {
-					response(cache.content);
-				}
-				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)
-					}));
-				}
-				$.ajax({
-					url: "search.php",
-					dataType: "json",
-					data: request,
-					success: function(data) {
-						cache.term = request.term;
-						cache.content = data;
-						response(data);
-					}
-				});
-			},
-			minLength: 2,
-			select: function(event, ui) {
-				log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value);
-			}
-		});
-	});
-	</script>
-</head>
-<body>
-
-<div class="demo">
-
-<div class="ui-widget">
-	<label for="birds">Birds: </label>
-	<input id="birds" />
-</div>
-
-<div class="ui-widget" style="margin-top:2em; font-family:Arial">
-	Result:
-	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
-</div>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-<p>
-The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.
-</p>
-<p>
-Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term.
-</p>
-</div><!-- End demo-description -->
-
-</body>
-</html>
+<!doctype html>
+<html>
+<head>
+	<title>jQuery UI Autocomplete Remote with caching demo</title>
+	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+	<script type="text/javascript" src="../../jquery-1.4.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 log(message) {
+			$("<div/>").text(message).prependTo("#log");
+			$("#log").attr("scrollTop", 0);
+		}
+		
+		var cache = {};
+		$("#birds").autocomplete({
+			source: function(request, response) {
+				if (cache.term == request.term && cache.content) {
+					response(cache.content);
+				}
+				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)
+					}));
+				}
+				$.ajax({
+					url: "search.php",
+					dataType: "json",
+					data: request,
+					success: function(data) {
+						cache.term = request.term;
+						cache.content = data;
+						response(data);
+					}
+				});
+			},
+			minLength: 2,
+			select: function(event, ui) {
+				log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value);
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="demo">
+
+<div class="ui-widget">
+	<label for="birds">Birds: </label>
+	<input id="birds" />
+</div>
+
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
+	Result:
+	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
+</div>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+<p>
+The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.
+</p>
+<p>
+Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term.
+</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/demos/autocomplete/remote.html b/demos/autocomplete/remote.html
index c183b5adb..cef9b549b 100644
--- a/demos/autocomplete/remote.html
+++ b/demos/autocomplete/remote.html
@@ -1,56 +1,56 @@
-<!doctype html>
-<html>
-<head>
-	<title>jQuery UI Autocomplete Remote datasource demo</title>
-	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.4.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 log(message) {
-			$("<div/>").text(message).prependTo("#log");
-			$("#log").attr("scrollTop", 0);
-		}
-		
-		$("#birds").autocomplete({
-			// TODO doesn't work when loaded from /demos/#autocomplete|remote
-			source: "search.php",
-			minLength: 2,
-			select: function(event, ui) {
-				log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value);
-			}
-		});
-	});
-	</script>
-</head>
-<body>
-
-<div class="demo">
-
-<div class="ui-widget">
-	<label for="birds">Birds: </label>
-	<input id="birds" />
-</div>
-
-<div class="ui-widget" style="margin-top:2em; font-family:Arial">
-	Result:
-	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
-</div>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-<p>
-The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.
-</p>
-<p>
-The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback.
-</p>
-</div><!-- End demo-description -->
-
-</body>
-</html>
+<!doctype html>
+<html>
+<head>
+	<title>jQuery UI Autocomplete Remote datasource demo</title>
+	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+	<script type="text/javascript" src="../../jquery-1.4.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 log(message) {
+			$("<div/>").text(message).prependTo("#log");
+			$("#log").attr("scrollTop", 0);
+		}
+		
+		$("#birds").autocomplete({
+			// TODO doesn't work when loaded from /demos/#autocomplete|remote
+			source: "search.php",
+			minLength: 2,
+			select: function(event, ui) {
+				log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value);
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="demo">
+
+<div class="ui-widget">
+	<label for="birds">Birds: </label>
+	<input id="birds" />
+</div>
+
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
+	Result:
+	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
+</div>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+<p>
+The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.
+</p>
+<p>
+The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback.
+</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
author	Richard Worth <rdworth@gmail.com>	2010-01-20 14:00:14 +0000
committer	Richard Worth <rdworth@gmail.com>	2010-01-20 14:00:14 +0000
commit	eecbde22a6b338785ac8e1991858ba7dab976eae (patch)
tree	11c5e0835757497110151e803bb1e1fb39820dcc /demos/autocomplete
parent	a1e069759ddcd3e56deff0d9334559b156df734c (diff)
download	jquery-ui-eecbde22a6b338785ac8e1991858ba7dab976eae.tar.gz jquery-ui-eecbde22a6b338785ac8e1991858ba7dab976eae.zip