Autcomplete: Refactored combobox demo.

1 files changed, 60 insertions, 50 deletions

diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html
index 6c81b25eb..37b74e155 100644
--- a/demos/autocomplete/combobox.html
+++ b/demos/autocomplete/combobox.html
@@ -18,75 +18,85 @@
 		.ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
 	</style>
 	<script type="text/javascript">
-	(function($) {
-		$.widget("ui.combobox", {
+	(function( $ ) {
+		$.widget( "ui.combobox", {
 			_create: function() {
 				var self = this;
 				var select = this.element.hide();
-				var input = $("<input>")
-					.insertAfter(select)
+				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 (this.value && (!request.term || matcher.test(text)))
+						delay: 0,
+						minLength: 0,
+						source: function( request, response ) {
+							var matcher = new RegExp( request.term, "i" );
+							response( select.children( "option" ).map(function() {
+								var text = $( this ).text();
+								if ( this.value && ( !request.term || matcher.test(text) ) )
 									return {
-										id: this.value,
-										label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
-										value: text
+										label: text.replace(
+											new RegExp(
+												"(?![^&;]+;)(?!<[^<>]*)(" +
+												$.ui.autocomplete.escapeRegex(request.term) +
+												")(?![^<>]*>)(?![^&;]+;)", "gi"
+											), "<strong>$1</strong>" ),
+										value: text,
+										option: this
 									};
-							}));
+							}) );
 						},
-						delay: 0,
-						change: function(event, ui) {
-							if (!ui.item) {
+						select: function( event, ui ) {
+							ui.item.option.selected = true;
+							//select.val( ui.item.option.value );
+							self._trigger( "selected", event, {
+								item: ui.item.option
+							});
+						},
+						change: function( event, ui ) {
+							if ( !ui.item ) {
 								// remove invalid value, as it didn't match anything
-								$(this).val("");
-								select.val("");
+								$( this ).val( "" );
+								select.val( "" );
 								return false;
 							}
-							select.val(ui.item.id);
-							self._trigger("selected", event, {
-								item: select.find("[value='" + ui.item.id + "']")
-							});
-							
-						},
-						minLength: 0
+						}
 					})
-					.addClass("ui-widget ui-widget-content ui-corner-left");
-				input.data("autocomplete")._renderItem = function( ul, item) {
+					.addClass( "ui-widget ui-widget-content ui-corner-left" );
+
+				input.data( "autocomplete" )._renderItem = function( ul, item ) {
 					return $( "<li></li>" )
 						.data( "item.autocomplete", item )
 						.append( "<a>" + item.label + "</a>" )
 						.appendTo( ul );
 				};
-				$("<button>&nbsp;</button>")
-				.attr("tabIndex", -1)
-				.attr("title", "Show All Items")
-				.insertAfter(input)
-				.button({
-					icons: {
-						primary: "ui-icon-triangle-1-s"
-					},
-					text: false
-				}).removeClass("ui-corner-all")
-				.addClass("ui-corner-right ui-button-icon")
-				.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();
-				});
+
+				$( "<button>&nbsp;</button>" )
+					.attr( "tabIndex", -1 )
+					.attr( "title", "Show All Items" )
+					.insertAfter( input )
+					.button({
+						icons: {
+							primary: "ui-icon-triangle-1-s"
+						},
+						text: false
+					})
+					.removeClass( "ui-corner-all" )
+					.addClass( "ui-corner-right ui-button-icon" )
+					.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() {
 		$("#combobox").combobox();
 		$("#toggle").click(function() {