Dynamically turn off Ajax Control Toolkit Autocomplete Extender

Question

I'm trying to dynamically enable/disable an Autocomplete extender control from the Ajax Control Toolkit based on a choice a user makes in a dropdown list.

My ASP.NET 4.0 Webforms app has a dropdown list, and depending on which country is selected from it, the zipcode autoextender should be enabled or disabled.

My markup:

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

With this setup, the autocomplete extender kicks in and displays valid Swiss zipcodes - life is good :-)

HOWEVER: if the user selects another country, I want to stop this autocomplete extender - I don't have the other zipcodes in my database to display, and displaying Swiss zipcodes for France doesn't make sense.

So I tried something like this to grab the change event on the drop down list

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

      var behavior = $('#ZipcodeBehavior');

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

I can get the ZipcodeBehavior just fine - but once I have it - nothing seems to work anymore...

How do I dynamically disable the Ajax Control Toolkit's AutocompleteExtender?

In markup, statically, I do it using

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

and then nothing at all gets rendered into my page.

Answer 1

First at all, you can't get MicrosoftAjax client object by jQuery selector. So this syntax var behavior = $('#ZipcodeBehavior'); doesn't make sense. Use $find("BehaviorID") instead.

To add disabling capability to AutoCompleteExtender add reference on this script to ScriptManager control:

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

After that you may to disabled/enable extender with this code:

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

BTW, with Enabled="false" property specified in markup I'm afraid you shouldn't enable extender on client.