jQuery ui.combobox和asp.net web窗體autopostback

Question

我使用jQuery UI庫（http://jqueryui.com/demos/autocomplete/#combobox）的autocombox。組合框代替標準的asp.net web窗體下拉列表控件，它的autopostback屬性設置爲true。有沒有一種方法可以在此控件上「繼承」事件處理程序，或者有什麼方法可以確定在組合框中發生了「選擇」或「更改」事件，因此我可以自行啓動回發？

編輯：

添加我的組合框代碼：

(function($) { 
    $.widget("ui.combobox", { 

    _create: function() { 
     var self = this; 
     var width = this.element.width() > 100 ? "style='width:"+this.element.width()+"px'" : ""; 
     self.select = this.element.hide(); 
     var v = self.select.children(":selected").text(); 
     self.span = $("<span>") 
     .insertAfter(self.select) 
     .addClass(self.select.attr("class")) 
     .addClass("ui-combobox"); 
     self.input = $("<input "+width+">") 
     .appendTo(self.span) 
     .autocomplete({ 
     source: function(request, response) { 
      var matcher = new RegExp(request.term, "i"); 
      response(self.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(); 
      self.select.val(ui.item.id); 
      self._trigger("selected", null, { 
      item: self.select.find("[value='" + ui.item.id + "']") 
      }); 
     }, 
     change: function(event, ui) { 
      if (!ui.item) { 
      var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"), 
      valid = false; 
      select.children("option").each(function() { 
       if (this.value.match(matcher)) { 
       this.selected = valid = true; 
       return false; 
       } 
      }); 
      if (!valid) { 
       // remove invalid value, as it didn't match anything 
       $(this).val(""); 
       select.val(""); 
       return false; 
      } 
      } 
     }, 
     minLength: 0 
     }) 
     .val(v) 
     .addClass(self.select.attr("class")) 
     .addClass("ui-widget-content ui-corner-left ui-combobox-input") 
     .myHover(); 
     $("<div></div>") 
     .appendTo(self.span) 
     .button({ 
     icons: { 
      primary: "ui-icon-triangle-1-s" 
     }, 
     text: false 
     }).removeClass("ui-corner-all") 
     .addClass(self.select.attr("class")) 
     .addClass("ui-corner-right ui-button-icon ui-combobox-button") 
     .position({ 
     my: "left center", 
     at: "right center", 
     of: self.input, 
     offset: "-1 0" 
     })//.css("top", "") 
     .click(function() { 
     // close if already visible 
     if (self.input.autocomplete("widget").is(":visible")) { 
      self.input.autocomplete("close"); 
      return; 
     } 
     // pass empty string as value to search for, displaying all results 
     self.input.autocomplete("search", ""); 
     self.input.focus(); 
     self.input.get(0).select(); 
     }); 
    }, 
    setValue: function(v) { 
     this.select.val(v); 
     this.input.val(this.select.children(":selected").text()); 
    } 
    //_trigger("change", e, ui); 
    }); 
})(jQuery); 

Answer 1

在組合框部件定義的_create函數中，您會注意到var select引用了select元素的目標。我們需要在組合框代碼中的兩個地方觸發該元素的更改事件。首先是在文本字段中選擇並填充菜單項。這將需要對自動填充小部件的關閉事件進行一些測試。第二個是關於窗口小部件的更改事件（用於手動輸入文本），這個更簡單很多。

首先，編輯發送到自動完成構造在ui.combobox _create功能圍繞線48的選項change處理選項後添加close處理選項：每次

change: function(event, ui) { 
    if (!ui.item) { 

    } 
}, 
close: function(event, ui) { 
    if (event.originalEvent && 
     event.originalEvent.type == "menuselected") { 
     $(select).change(); 
    } 
} 

注意，菜單關閉，如果它是menuselected事件的結果（即用戶選擇了一個選項），它將觸發原始選擇的更改事件。此時，該項目將填充到文本框中，並在源元素中將其標記回。

接着，修改所述選擇的測試和設置功能在change處理上述（處或周圍線36），以包括所述選擇的改變的呼叫時，執行成功的測試和的值被設置：

select.children("option").each(function() { 
    if ($(this).text().match(matcher)) { 
     this.selected = valid = true; 
     $(select).change(); 
     return false; 
    } 
}); 

這是必要的，因爲以選項編程方式標記該選項不會生成所需的更改事件。

我創建了一個working demo，綁定到源選擇的更改事件在更新時警告元素的新值。我相信ASP的自動回發處理程序也監聽這個相同的事件，所以我懷疑這應該會產生你正在尋找的行爲。

Answer 2

change事件：

$(".selector").bind("autocompletechange", function(event, ui) { 
    // do postback 
}); 

對於選擇，使用 「autocompleteselect」 而不是 「autocompletechange」。