动态关闭 Ajax Control Toolkit Autocomplete Extender

Question

我正在尝试根据用户在下拉列表中所做的选择从 Ajax 控件工具包中动态启用/禁用自动完成扩展器控件。

我的 ASP.NET 4.0 Webforms 应用程序有一个下拉列表，根据从中选择的国家/地区，应该启用或禁用邮政编码自动扩展器。

我的标记：

<asp:DropDownList runat="server" ID="ddlCountries">
    <Items>
            <asp:ListItem Text="Switzerland" Value="CH" />
            <asp:ListItem Text="Germany" Value="D" />
            <asp:ListItem Text="Italy" Value="I" />
            <asp:ListItem Text="France" Value="F" />
    </Items>
</asp:DropDownList>
<br />

<asp:TextBox runat="server" ID="tbxZipcode" />

<asp:AutoCompleteExtender 
     runat="server" ID="acZipcode" BehaviorID="ZipcodeBehavior" 
     ServiceMethod="GetZipCode"
     TargetControlID="tbxZipCode" MinimumPrefixLength="1" CompletionInterval="15" 
     OnClientItemSelected="PopulateTextboxes" CompletionSetCount="25" />

通过此设置，自动完成扩展程序启动并显示有效的瑞士邮政编码 - 生活是美好的 :-)

但是：如果用户选择另一个国家，我想停止这个自动完成扩展器 - 我的数据库中没有其他邮政编码要显示，并且显示法国的瑞士邮政编码没有意义。

所以我尝试了这样的方法来抓取下拉列表中的change 事件

$(document).ready(function () {
   $('#<%= ddlCountries.ClientID %>').change(function () {
      var chosenCountry = $(this).val();

      var behavior = $('#ZipcodeBehavior');

      if (chosenCountry == "CH") {
         behavior.disabled = '';
      } else {
         behavior.disabled = 'disabled';
      }
   });
});

我可以得到 ZipcodeBehavior 就好了 - 但一旦我得到它 - 似乎没有任何工作了......

如何动态禁用 Ajax 控件工具包的 AutocompleteExtender？

在标记中，静态地，我使用

<asp:AutoCompleteExtender Enabled="False" .... />

然后什么都没有渲染到我的页面中。

Answer 1

首先，您无法通过 jQuery 选择器获取 MicrosoftAjax 客户端对象。所以这个语法var behavior = $('#ZipcodeBehavior'); 没有意义。请改用$find("BehaviorID")。

要向 AutoCompleteExtender 添加禁用功能，请将此脚本的引用添加到 ScriptManager 控件：

Sys.Extended.UI.AutoCompleteBehavior.prototype.set_enabled = function (value) {
    try {
        $removeHandler(this.get_element(), "keydown", this._keyDownHandler);
    } catch (error) {} //just escape error if handler already removed
    this._timer.set_enabled( !! value);
    if (value) {
        this._keyDownHandler = Function.createDelegate(this, this._onKeyDown);
    } else {
        this._keyDownHandler = Function.createDelegate(this, function () {});
    }
    $addHandler(this.get_element(), "keydown", this._keyDownHandler);
};

之后，您可以使用以下代码禁用/启用扩展器：

$('#<%= ddlCountries.ClientID %>').change(function () {
    var chosenCountry = $(this).val();
    $find("ZipcodeBehavior").set_enabled(chosenCountry == "CH");
});

顺便说一句，在标记中指定了Enabled="false" 属性，恐怕你不应该在客户端启用扩展器。