How do you get the AutoCompleteExtender to submit when an item is clicked

Question

I have a textbox and a button on my ASP.net form for executing a search. I have added an autocompleteextender from the AJAX toolkit to show suggestions while the user is typing. This works fine, however what I want to happen is for the Click event of the button to fire when the user selects an item in the displayed list of suggestions. Anyone any idea how to do this?

score 6 · Accepted Answer · answered Mar 10 '11 at 22:25

Since the item selected event is going to fire a client side JavaScript event, I typically add the following code to my OnClientItemSelected event method:

<script type="text/javascript" language="javascript">
   function YourMethodHere(source, eventArgs)
   {
      $get('ctl00_BodyPlaceHolder_btnAutoSubmit').click();
   }
</script>

You'll need to find the proper name of your button accordingly and replace it above.

As an added feature, sometimes I want to be able to type a value in to the AutoComplete and hit the enter key right away if I know what I want. To accomplish this, you'll want to wrap your AutoComplete textbox and button in a panel and set the default button accordingly:

<asp:Panel ID="pnlAutoCompleteStuff" runat="server" DefaultButton="btnAutoSubmit">
   Search: <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
           <cc1:AutoCompleteExtender ID="aceSearch" runat="server"
                                      TargetControlID="txtSearch"                             
                                      ServiceMethod="YourMethodHere"                   
                                      ServicePath="YourServicePath"                                   
                                      MinimumPrefixLength="4"
                                      CompletionInterval="500"
                                      EnableCaching="False"
                                      OnClientItemSelected="AutoCompleteClientMethod"
                                      CompletionSetCount="3">
            </cc1:AutoCompleteExtender>
   <asp:Button ID="btnAutoSubmit" runat="server" Text="Select" />
</asp:Panel

Not having jquery installed I went old school and did this document.getElementById("<%= cmdSearch.ClientID %>").click() but asside from that this is a perfect solution, thanks. — Martin Brown, Mar 11 '11 at 10:05

score 1 · Answer 2 · answered Jun 11 '12 at 05:52

Set the textbox's Autopostback to true.

<asp:TextBox ID="SearchCityBox" CssClass="searchOne" runat="server" Width="500px" Height="18px" AutoPostBack="true" OnTextChanged="SearchCityBox_TextChanged"></asp:TextBox>

Then create an onTextChanged event handler to do the same thing as your button. Or you could just point it to the same event handler your button has

score 0 · Answer 3 · answered Mar 10 '11 at 22:08

0

Have a look at onclientitemselected

There is some info here: Implementing Auto-Suggest Using AutoCompleteExtender Control

answered Mar 10 '11 at 22:08

PMC

4,698
3
37
57

How do you get the AutoCompleteExtender to submit when an item is clicked

3 Answers3