1

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

我正在使用这里详述的实现。

以下是一些选择片段

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;">

问题

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

4

2 回答 2

1

有几件事有助于回答这个问题。一种是查看JQuery-UI 自己关于此功能的文档：

// 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 ) {} );

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

我们可以通过修改自动完成页面上展示的默认功能来做到这一点：

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();. 确保执行该操作的任何内容仍然在从回发返回时被调用，否则该功能将不会返回。如果您在更新面板中异步使用代码，这是一回事。
于 2013-05-29T18:17:35.363 回答
0

而不是 __doPostBack(this.element.attr('name'), ''); 写

  if (this.element.attr('onchange') != undefined &&        this.element.attr('onchange').indexOf("__doPostBack") >= 0)
                        __doPostBack(this.element.attr('name'), '');
于 2015-07-30T10:11:00.837 回答