Daniel@0: (function($) {
Daniel@0: $.widget( "custom.combobox", {
Daniel@0:     _create : function() {
Daniel@0:         this.wrapper = $("<span>").addClass(
Daniel@0:                 "custom-combobox")
Daniel@0:                 .insertAfter(this.element);
Daniel@0:         this.element.hide();
Daniel@0:         this._createAutocomplete();
Daniel@0:         this._createShowAllButton();
Daniel@0:     },
Daniel@0: 
Daniel@0:     _createAutocomplete : function() {
Daniel@0:         var selected = this.element.children(":selected"), value = selected
Daniel@0:                 .val() ? selected.text() : "";
Daniel@0:         this.input = $("<input>")
Daniel@0:                 .appendTo(this.wrapper)
Daniel@0:                 .val(value)
Daniel@0:                 .attr("title", "")
Daniel@0:                 .addClass(
Daniel@0:                         "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
Daniel@0:                 .autocomplete({
Daniel@0:                     delay : 0,
Daniel@0:                     minLength : 0,
Daniel@0:                     source : $.proxy(this, "_source")
Daniel@0:                 }).tooltip({
Daniel@0:                     tooltipClass : "ui-state-highlight"
Daniel@0:                 });
Daniel@0:         this._on(this.input, {
Daniel@0:             autocompleteselect : function(event, ui) {
Daniel@0:                 ui.item.option.selected = true;
Daniel@0:                 this._trigger("select", event, {
Daniel@0:                     item : ui.item.option
Daniel@0:                 });
Daniel@0:             },
Daniel@0:             autocompletechange : "_removeIfInvalid"
Daniel@0:         });
Daniel@0:     },
Daniel@0: 
Daniel@0:     _createShowAllButton : function() {
Daniel@0:         var input = this.input, wasOpen = false;
Daniel@0:         $("<a>").attr("tabIndex", -1).attr("title",
Daniel@0:                 "Show All Items").tooltip().appendTo(
Daniel@0:                 this.wrapper).button({
Daniel@0:             icons : {
Daniel@0:                 primary : "ui-icon-triangle-1-s"
Daniel@0:             },
Daniel@0:             text : false
Daniel@0:         }).removeClass("ui-corner-all").addClass(
Daniel@0:                 "custom-combobox-toggle ui-corner-right")
Daniel@0:                 .mousedown(
Daniel@0:                         function() {
Daniel@0:                             wasOpen = input.autocomplete(
Daniel@0:                                     "widget")
Daniel@0:                                     .is(":visible");
Daniel@0:                         }).click(function() {
Daniel@0:                     input.focus();
Daniel@0:                     // Close if already visible
Daniel@0:                     if (wasOpen) {
Daniel@0:                         return;
Daniel@0:                     }
Daniel@0:                     // Pass empty string as value to search
Daniel@0:                     // for, displaying all results
Daniel@0:                     input.autocomplete("search", "");
Daniel@0:                 });
Daniel@0:     },
Daniel@0:     _source : function(request, response) {
Daniel@0:         var matcher = new RegExp($.ui.autocomplete
Daniel@0:                 .escapeRegex(request.term), "i");
Daniel@0:         response(this.element.children("option").map(
Daniel@0:                 function() {
Daniel@0:                     var text = $(this).text();
Daniel@0:                     if (this.value
Daniel@0:                             && (!request.term || matcher
Daniel@0:                                     .test(text)))
Daniel@0:                         return {
Daniel@0:                             label : text,
Daniel@0:                             value : text,
Daniel@0:                             option : this
Daniel@0:                         };
Daniel@0:                 }));
Daniel@0:     },
Daniel@0: 
Daniel@0:     _removeIfInvalid : function(event, ui) {
Daniel@0:         // Selected an item, nothing to do
Daniel@0:         if (ui.item) {
Daniel@0:             return;
Daniel@0:         }
Daniel@0:         // Search for a match (case-insensitive)
Daniel@0:         var value = this.input.val(), valueLowerCase = value
Daniel@0:                 .toLowerCase(), valid = false;
Daniel@0:         this.element
Daniel@0:                 .children("option")
Daniel@0:                 .each(
Daniel@0:                         function() {
Daniel@0:                             if ($(this).text()
Daniel@0:                                     .toLowerCase() === valueLowerCase) {
Daniel@0:                                 this.selected = valid = true;
Daniel@0:                                 return false;
Daniel@0:                             }
Daniel@0:                         });
Daniel@0:         // Found a match, nothing to do
Daniel@0:         if (valid) {
Daniel@0:             return;
Daniel@0:         }
Daniel@0:         // Remove invalid value
Daniel@0:         this.input.val("").attr("title",
Daniel@0:                 value + " didn't match any item").tooltip(
Daniel@0:                 "open");
Daniel@0:         this.element.val("");
Daniel@0:         this._delay(function() {
Daniel@0:             this.input.tooltip("close").attr("title", "");
Daniel@0:         }, 2500);
Daniel@0:         this.input.autocomplete("instance").term = "";
Daniel@0:     },
Daniel@0:     _destroy : function() {
Daniel@0:         this.wrapper.remove();
Daniel@0:         this.element.show();
Daniel@0:     }
Daniel@0: });
Daniel@0: })(jQuery);