jQuery ui.combobox和asp.net web表单autopostback

我正在使用jQuery UI库中的autocombox（http://jqueryui.com/demos/autocomplete/#combobox）。 combobox正在替换标准的asp.net web forms下拉列表控件，并将其autopostback属性设置为true。 有没有一种方法可以“inheritance”此控件上的事件处理程序，或者有一种方法可以识别combobox中发生了“选择”或“更改”事件，这样我就可以自己启动回发了吗？

编辑：

添加我的combobox代码：

(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 = $("") .insertAfter(self.select) .addClass(self.select.attr("class")) .addClass("ui-combobox"); self.input = $("") .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"), "$1"), 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(); $("
") .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

在combobox小部件定义的_create函数中，您会注意到var select引用了被定位的select元素。 我们需要在combobox代码中的两个位置触发该元素的更改事件。 第一种是在文本字段中选择并填充菜单项。 这将需要对自动完成小部件的关闭事件进行一些测试。 第二个是关于窗口小部件的更改事件（用于手动文本输入），这个更简单。

首先，编辑发送到第48行的ui.combobox _create函数中的自动完成构造函数的选项，以在change处理程序选项后添加一个close处理程序选项：

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

请注意，每次菜单关闭时，如果它是menuselected事件的结果（即用户选择了一个选项），它将触发原始选择的更改事件。 此时，项目将填充在文本框中，并在源元素中标记为选中。

接下来，修改上面的change处理程序中的select的测试和设置函数（在第36行或附近），以包括在执行成功测试并设置值时调用select的更改：

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

这是必要的，因为以编程方式将选项标记为已选中将不会生成所需的更改事件。

我创建了一个工作演示，其中包含一个绑定到源选择的更改事件，该更新事件在更新时会警告元素的新值。 我相信ASP的自动回发处理程序也会侦听同一个事件，因此我怀疑这应该会产生您正在寻找的行为。

Answer 2

对于更改事件：

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

对于select，请使用“autocompleteselect”而不是“autocompletechange”。