jQuery的ui.combobox和asp.net web表单自动回发 [英] jQuery ui.combobox and asp.net web forms autopostback
问题描述
我使用的是从jQuery UI库（http://jqueryui.com/demos/autocomplete/#combobox）的autocombox。组合框取代标准的asp.net web窗体的DropDownList与它控制的AutoPostBack属性设置为true。有没有一种方法，我可以'继承'事件在这个控制处理程序还是有办法，我可以找出一个'选择'或'变'事件在组合框中发生这样我就可以把火关回传自己？
编辑：
添加我的组合框code：
（函数（$）{
$ .widget（ui.combobox，{ _create：功能（）{
VAR自我=这一点;
变种宽度= this.element.width（）＆GT; 100？ 风格=宽度：+ this.element.width（）+PX：;
self.select = this.element.hide（）;
变种V = self.select.children（：选择）文本（）;
self.span = $（＆所述;跨度＆gt;中）
.insertAfter（self.select）
.addClass（self.select.attr（类））
.addClass（UI-组合框）;
self.input = $（＆LT;输入+宽+＆gt;中）
.appendTo（self.span）
.autocomplete（{
来源：函数（请求，响应）{
VAR匹配=新的RegExp（request.term，I）;
响应（self.select.children（选项）。图（函数（）{
变种文字= $（本）的.text（）;
如果（！request.term || matcher.test（文本））
返回{
ID：$（本）.VAL（）
标签：？！？！（[^＆放;;] +）（小于[^＆LT;＆GT;] *）（「text.replace（新的RegExp（+
request.term.replace（/（[\\ ^ \\ $ \\（\\）\\ [\\] \\ {\\} \\ * \\ \\ + \\ \\ |？\\\\]）/ GI，
\\\\ $ 1）+）（[^＆所述;]的计算值？！* GT;！）（[^＆放大器;;] +），GI），＆所述;强＆GT; $ 1所述; / STRONG＆gt;中）
值：文本
};
}））;
}， 延迟：0，
选择：功能（E，UI）{
如果（！ui.item）{
//删除无效的价值，因为它没有匹配
$（本）.VAL（）;
返回false;
}
$（本）。重点（）;
self.select.val（ui.item.id）;
self._trigger（选中，空，{
项目：self.select.find（[值='+ ui.item.id +']）
}）;
}，
改变：函数（事件，UI）{
如果（！ui.item）{
VAR匹配=新的RegExp（^+ $ .ui.autocomplete.escapeRegex（$（本）.VAL（））+$，I），
有效= FALSE;
select.children（选项）。每个（函数（）{
如果（this.value.match（匹配））{
this.selected =有效= TRUE;
返回false;
}
}）;
如果（！有效）{
//删除无效的价值，因为它没有匹配
$（本）.VAL（）;
select.val（）;
返回false;
}
}
}，
的minLength：0
}）
.VAL（ⅴ）
.addClass（self.select.attr（类））
.addClass（UI小部件内容的UI角左UI的组合框输入）
.myHover（）;
$（＆LT; DIV＆GT;＆LT; / DIV＆gt;中）
.appendTo（self.span）
.button（{
图标：{
初级：UI图标三角-1-S
}，
文本：假
}）。removeClass移除（UI角所有）
.addClass（self.select.attr（类））
.addClass（UI角右UI按钮图标UI的组合框按钮）
。位置（{
我：中间偏左，
在右中心
组成：self.input，
偏移：-1 0
}）//。的CSS（顶部，）
。点击（函数（）{
//关闭，如果已经显现
如果（self.input.autocomplete（小部件）是（：可见））{
self.input.autocomplete（亲密）;
返回;
}
//传递空字符串值，搜索，显示所有结果
self.input.autocomplete（搜索，）;
self.input.focus（）;
self.input.get（0）。选择（）;
}）;
}，
的setValue：功能（ⅴ）{
this.select.val（五）;
this.input.val（this.select.children（：选择）文本（））;
}
// _触发器（变，即用户界面）;
}）;
}）（jQuery的）;
在组合框控件定义的 _create 功能，你会发现， VAR选择指的是选择的元素作为目标。我们需要在下拉列表code两地火的元素更改事件。首先，当被选中，在文本字段中填入一个菜单项。这将需要在自动完成构件的关闭事件的一些测试。第二个是在小部件（手动输入文本）的变化事件，这个人是一个很好的协议更简单。
首先，编辑在ui.combobox发送到自动完成构造的选项 _create 周围行48函数来添加一个关闭的变更后的处理程序选项处理选项：
的变化：函数（事件，UI）{
如果（！ui.item）{ }
}，
关闭：函数（事件，UI）{
如果（event.originalEvent＆安培;＆安培;
event.originalEvent.type ==menuselected）{
$（选择）.change（）;
}
}
注意，每个菜单关闭，如果它是一个 menuselected 事件的结果（即用户选择一个选项），这将触发时间原来选择的改变事件。通过这一次的项在文本框中填充并在源元件标出的选定回
接下来，修改在变更处理以上（或大约36行）选择的测试和设置功能，包括对选择的变化呼叫时成功进行检验和值被设置：
select.children（选项）。每个（函数（）{
如果（$（本）的.text（）。匹配（匹配））{
this.selected =有效= TRUE;
$（选择）.change（）;
返回false;
}
}）;
这是必要的，因为编程标记为选中不会生成所需的改变事件的选项。
我创建了一个工作演示与绑定到源change事件选择提醒新元素的值，当它被更新。我认为，ASP的自动回传处理程序还侦听此相同的事件，所以我猜想这应该生成你正在寻找的行为。
I'm using the autocombox from the jQuery UI library (http://jqueryui.com/demos/autocomplete/#combobox). The combobox is replacing a standard asp.net web forms dropdownlist control with it's autopostback property set to true. Is there a way I can 'inherit' the event handler on this control or is there a way I can identify that a 'select' or 'change' event has happened in the combobox so I can fire off a postback myself?
EDIT:
Adding my combobox code:
(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);
In the _create function of the combobox widget definition, you'll notice that var select refers to the select element being targeted. We need to fire a change event on that element in two places in the combobox code. The first is when a menu item is selected and populated in the text field. This will require some testing on the close event of the autocomplete widget. The second is on the change event for the widget (for manual text entry) and this one is a good deal simpler.
First, edit the options sent to the autocomplete constructor in the ui.combobox _create function around line 48 to add a close handler option after the change handler option:
change: function(event, ui) {
if (!ui.item) {
}
},
close: function(event, ui) {
if (event.originalEvent &&
event.originalEvent.type == "menuselected") {
$(select).change();
}
}
Notice that each time the menu closes, if it is the result of a menuselected event (i.e. the user chose an option), it will fire the original select's change event. By this time the item is populated in the text box and also flagged selected back in the source element.
Next, modify the test and set function for the select in the change handler above (at or around line 36) to include a call to the select's change when a successful test is performed and the value is set:
select.children("option").each(function() {
if ($(this).text().match(matcher)) {
this.selected = valid = true;
$(select).change();
return false;
}
});
This is necessary because programmatically flagging the option as selected will not generate the required change event.
I have created a working demo with a change event bound to the source select that alerts the new value of the element when it is updated. I believe that ASP's auto-postback handler also listens for this same event so I suspect this should generate the behavior you are looking for.
这篇关于jQuery的ui.combobox和asp.net web表单自动回发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
