Question

当我的组合框改变值时（我想在更新面板中使用AJAX调用 - 但一次只有一件事），我想回发到服务器。我正在使用jQuery UI AutoComplete Combobox，不幸的是，它正在干扰更改事件，因为我没有直接更改下拉列表。

我正在使用详细here的实施。

以下是一些选择片段

HTML正文代码

<span class="ui-widget">
    <asp:DropDownList ID="cboLang" runat="server" AutoPostBack="True">
        <asp:ListItem Value="ActionScript">ActionScript</asp:ListItem>
        <asp:ListItem Value="AppleScript">AppleScript</asp:ListItem>
        <asp:ListItem Value="Asp">Asp</asp:ListItem>
    </asp:DropDownList>
</span>

自动填充Javascript

这是自动完成js，只要做出选择就会执行。它将始终运行函数_removeIfInvalid

this._on(this.input, {
    autocompleteselect: function (event, ui) {
        ui.item.option.selected = true;
        this._trigger("select", event, {
            item: ui.item.option
        });
    },

    autocompletechange: "_removeIfInvalid"
});

服务器端代码

Protected Sub cboLang_SelectedIndexChanged(sender As Object, e As EventArgs) _
        Handles cboLang.SelectedIndexChanged
    'DO OTHER STUFF HERE
    Dim alert = String.Format("alert('{0}');", "Hi")
    ScriptManager.RegisterStartupScript(Me, Me.GetType, "DropDownChange", alert, True)
End Sub

生成的代码

当ASP.NET呈现带有附加事件的页面时，它会生成以下代码

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl00'];
if (!theForm) {
    theForm = document.ctl00;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
    theForm.submit();
    }
}
//]]>
</script>

<select id="cboLang" onchange="javascript:setTimeout('__doPostBack(\'cboLang\',\'\')', 0)"
    name="cboLang" style="display: none;">

问题

我可以在哪里进行更改以确保每次更新自动完成输入时都可以触发服务器事件？

Answer 1

有几件事有助于回答这个问题。一个是看看这个函数的JQuery-UI's own documentation：

// Initialize the autocomplete with the select callback specified:
$( ".selector" ).autocomplete({  select: function( event, ui ) {}}); 
// Bind an event listener to the autocompleteselect event:
$( ".selector" ).on( "autocompleteselect", function( event, ui ) {} );

基本上，需要发生的事情是，当选择项目时（从菜单或通过输入并获得完全匹配），需要发出回调信号。

我们可以通过修改autocomplete页面上显示的默认功能来实现此目的：

this._on( this.input, {
  autocompleteselect: function( event, ui ) {
    ui.item.option.selected = true;
    this._trigger( "select", event, {
      item: ui.item.option
    });
  },
  autocompletechange: "_removeIfInvalid"
});

此代码附加了select和change事件的监听，并在这些事件分别触发时运行内联定义函数和_removeIfInvalid函数

通过实施以下更改，我们可以在进行有效选择时进行回发：

//attach listeners
this._on(this.input, {
  autocompleteselect: "_selectFromMenu",
  autocompletechange: "_removeIfInvalid"
});

只要从菜单中选择了某个项目，就会调用

_selectFromMenu: function (event, ui) {
  ui.item.option.selected = true;
  this._trigger("select", event, {
      item: ui.item.option
    });
  __doPostBack('', '');
},

会在文字发生变化时随时调用：

_removeIfInvalid: function (event, ui) {

  // Selected an item, automatically valid, post back
  if (ui.item) {
    __doPostBack('', '');
    return;
  }

  // Search for a match (case-insensitive)
  var value = this.input.val(),
    valueLowerCase = value.toLowerCase(),
    valid = false;
  this.element.children("option").each(function () {
      if ($(this).text().toLowerCase() === valueLowerCase) {
        this.selected = valid = true;
        return false;
      }
    });

  // Found a match, post back
  if (valid) {
    __doPostBack('', '');
    return;
  }

  // Remove invalid value...

这是jsfiddle，其中包含完整的代码更改，但__doPostBack已被注释掉，因为它没有被任何内容处理

进一步说明：

我正在调用__doPostBack，但由于asp.net事件处理生成的代码，我依赖于该方法可用。
要初始化组合框，您必须致电$("#combobox").combobox();。确保在从帖子返回时仍然调用该操作的任何内容，否则该功能将不会返回。如果您在更新面板中异步使用代码，这是一件事情。

Answer 2

而不是__doPostBack（this.element.attr（＆＃39; name＆＃39;），＆＃39;＆＃39;）; 写

  if (this.element.attr('onchange') != undefined &&        this.element.attr('onchange').indexOf("__doPostBack") >= 0)
                        __doPostBack(this.element.attr('name'), '');

使用JQuery-UI自动完成时，Fire DropDownList SelectedIndexChanged事件

2 个答案: