Search code examples
c#asp.netautocompleteajaxcontroltoolkit

Detect AutoCompleteExtender select event


What is the best approach to capture AutoCompleteExtender select event, since control does not have this event?

Here is sample I am talking about. I have two texboxes (Location1TextBox,Location2TextBox) with linked AutoCompleteExtender controls. This part works well. Now the problem is when user makes selection form any AutoCompleteExtender I need to catch this event and try to calculate distance between location1 and location2. Result should be populated to DistanceTextBox automaticly. Any good sugesstions? I just hope it would not end up with onchange event for textboxes...

    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
            <asp:Label ID="TitleLabel" runat="server" Text='<% $resources:AppResource,LocationStart %>'
                CssClass="OneColumnLabel"></asp:Label>:<br />
            <asp:TextBox ID="Location1TextBox" runat="server" CssClass="TwoColumnMiddleLongText"
                ValidationGroup="Edit" AutoPostBack="true"></asp:TextBox>*
            <asp:RequiredFieldValidator ID="TitleRequiredFieldValidator" runat="server" ControlToValidate="Location1TextBox"
                Display="None" ErrorMessage='<% $resources:AppResource,LocationRequired %>' ValidationGroup="Edit"></asp:RequiredFieldValidator>
            <ajaxToolkit:AutoCompleteExtender runat="server" ID="AutoCompleteExtender1" TargetControlID="Location1TextBox"
                ServiceMethod="GetCompletionList" ServicePath="TravelOrder.aspx" MinimumPrefixLength="1"
                CompletionInterval="300" UseContextKey="True">
            </ajaxToolkit:AutoCompleteExtender>
            <asp:Label ID="Label7" runat="server" Text='<% $resources:AppResource,LocationArrival %>'
                CssClass="OneColumnLabel"></asp:Label>:<br />
            <asp:TextBox ID="Location2TextBox" runat="server" CssClass="TwoColumnMiddleLongText"
                ValidationGroup="Edit"></asp:TextBox>*
            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="Location2TextBox"
                Display="None" ErrorMessage='<% $resources:AppResource,LocationRequired %>' ValidationGroup="Edit"></asp:RequiredFieldValidator>
            <ajaxToolkit:AutoCompleteExtender runat="server" ID="AutoCompleteExtender2" TargetControlID="Location2TextBox"
                ServiceMethod="GetCompletionList" ServicePath="TravelOrder.aspx" MinimumPrefixLength="1"
                CompletionInterval="300" UseContextKey="True">
            </ajaxToolkit:AutoCompleteExtender>
            <asp:Label ID="Label8" runat="server" Text='<% $resources:AppResource,Distance %>'
                CssClass="OneColumnLabel"></asp:Label>:<br />
            <asp:TextBox ID="DistanceTextBox" runat="server" CssClass="OneColumnText" ValidationGroup="Edit"></asp:TextBox>*
            <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="DistanceTextBox"
                Display="None" ErrorMessage='<% $resources:AppResource,DistanceRequired %>' ValidationGroup="Edit"></asp:RequiredFieldValidator>
        </ContentTemplate>
    </asp:UpdatePanel>

Solution

  • You may remove AutoPostBack="true" from a target textbox, subscribe on TextChanged event and use function below as handler for itemSelected extender's client event OnClientItemSelected="autoCompleteEx_ItemSelected":

    <script type="text/javascript">
         function autoCompleteEx_ItemSelected(sender, args) {
              __doPostBack(sender.get_element().name, "");
         }
    </script>