Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 367
Gregor Primar Avatar asked Oct 11 '12 11:10

Gregor Primar


1 Answers

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>
like image 72
Yuriy Rozhovetskiy Avatar answered Sep 28 '22 04:09

Yuriy Rozhovetskiy