使用JQuery的UI自动完成，当消防DropDownList的SelectedIndexChanged事件 [英] Fire DropDownList SelectedIndexChanged event when using JQuery-UI Autocomplete

问题描述

我想回发到服务器时，我的组合框的变化值（更新面板与AJAX调用理想的 - 但是一次一个东西）。我使用的是我使用的 jQuery UI的 自动完成组合框 ，不幸的是，它与interferring因为我不会改变下拉列表中直接更改事件。

I'd like to post back to the server when my combobox changes value (ideally with an AJAX call in an update panel - but one thing at a time). I'm using the I'm using the jQuery UI AutoComplete Combobox and, unfortunately, it's interferring with the change event as I'm not changing the drop down list directly.

我在这里使用的实施细则 。

I'm using the implementation detailed here.

下面是一些选择片段

HTML车身code

<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

这是exexutes每当选择完毕自动完成JS。它会一直运行功能 _removeIfInvalid

This is the autocomplete js that exexutes whenever a selection has been made. It will always run the function _removeIfInvalid

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

    autocompletechange: "_removeIfInvalid"
});

服务器端code

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

生成code

当一个ASP.NET呈现与附加事件的页面，它会产生以下code

When an ASP.NET renders the page with the attached event, it produces the following code

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

问

我在哪里可以去进行更改，以确保每次更新到autcomplete投入，我可以触发服务器事件？

Where can I go about making changes to ensure that with each update to the autcomplete input, I can trigger a server event?

推荐答案

有一对夫妇的事情，是回答这个问题有帮助。一是看看的JQuery的UI此功能的自己的文档：

There are a couple things that are helpful for answering this question. One is to take a look at JQuery-UI's own documentation on this function:

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

从本质上讲，需要做的，就是有什么需要的信号回调时，该项目已被选中（从菜单或通过键入并获得精确匹配）。

Essentially, what needs to happen, is something needs to signal a callback when the item has been selected (either from the menu or by typing and getting an exact match).

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

We can do this by modifying the default functionality demonstrated on the autocomplete page:

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

这code重视对选择和更改事件listeneres并运行内嵌定义函数和_removeIfInvalid功能每当这些事件消防（分别）

This code attaches listeneres on the select and change events and runs the inline defined function and the _removeIfInvalid function whenever those events fire (respectively)

通过实施以下更改，我们可以做的时候有效的选择完毕回传：

By implementing the following changes we can do a postback when a valid selection has been made:

//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 ，提供完整的code的变化，虽然 __ doPostBack 被注释掉了，因为它不被任何处理

Here's a jsfiddle with the complete code changes, although __doPostBack is commented out because it is not being handled by anything

一对夫妇进一步指出：

• 我打电话__doPostBack，但我靠着这个方法，因为asp.net事件处理是可以生成code。


• 在为了初始化组合框，你必须调用 $（＃组合框），组合框（）; 。确保无论是preforming该操作仍然是获取调用从背部后返回，否则功能不会回来。这是一件事，过去的工作，如果你使用了code异步在一个更新面板。

• I'm calling __doPostBack, but I'm relying on that method being available because of asp.net event handling generated code.
• In order to initialize the combo box, you have to call $("#combobox").combobox();. Make sure that whatever is preforming that operation is still getting called on the return from the post back, otherwise the functionality will not come back. This is one thing to work past if you're using the code asynchronously in an update panel.

这篇关于使用JQuery的UI自动完成，当消防DropDownList的SelectedIndexChanged事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！