Autcomplete: Refactored combobox demo.

diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html
index 6c81b25ebf00358c6f325aba2bb135e5777aeec7..37b74e155d4b9b3c5d979bd865bc4b294c593271 100644 (file)
--- 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() {