From ffc29bba052e4bc8b84e4c2e16036140148b6f9c Mon Sep 17 00:00:00 2001
From: jzaefferer <joern.zaefferer@gmail.com>
Date: Thu, 8 Apr 2010 12:07:45 +0200
Subject: Autocomplete: Combobox demo update, fixed mustMatch with corrected
 change event, also added button for toggling the hidden select and an
 empty-value option. Fixes #5453

---
 demos/autocomplete/combobox.html | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

(limited to 'demos/autocomplete')

diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html
index 4c6b656a1..3001f7d17 100644
--- a/demos/autocomplete/combobox.html
+++ b/demos/autocomplete/combobox.html
@@ -30,24 +30,23 @@
 							var matcher = new RegExp(request.term, "i");
 							response(select.children("option").map(function() {
 								var text = $(this).text();
-								if (!request.term || matcher.test(text))
+								if (this.value && (!request.term || matcher.test(text)))
 									return {
-										id: $(this).val(),
+										id: this.value,
 										label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
 										value: text
 									};
 							}));
 						},
 						delay: 0,
-						select: function(e, ui) {
+						change: function(event, 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, {
+							self._trigger("selected", event, {
 								item: select.find("[value='" + ui.item.id + "']")
 							});
 							
@@ -56,6 +55,7 @@
 					})
 					.addClass("ui-widget ui-widget-content ui-corner-left");
 				$("<button>&nbsp;</button>")
+				.attr("tabIndex", -1)
 				.attr("title", "Show All Items")
 				.insertAfter(input)
 				.button({
@@ -81,7 +81,10 @@
 	})(jQuery);
 		
 	$(function() {
-		$("select").combobox();
+		$("#combobox").combobox();
+		$("#toggle").click(function() {
+			$("#combobox").toggle();
+		});
 	});
 	</script>
 </head>
@@ -91,7 +94,8 @@
 
 <div class="ui-widget">
 	<label>Your preferred programming language: </label>
-	<select>
+	<select id="combobox">
+		<option value="">Select one...</option>
 		<option value="a">asp</option>
         <option value="c">c</option>
         <option value="cpp">c++</option>
@@ -107,6 +111,7 @@
         <option value="s">scala</option>
 	</select>
 </div>
+<button id="toggle">Show underlying select</button>
 
 </div><!-- End demo -->
 
-- 
cgit v1.2.3