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

asp.net asp.net-ajax autocomplete autocompleteextender
Martin Brown picture Martin Brown · Mar 10, 2011 · Viewed 7.1k times · Source

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?

Answer

Dillie-O picture Dillie-O · Mar 10, 2011

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

Related questions

jQuery $(document).ready and UpdatePanels?

I'm using jQuery to wire up some mouseover effects on elements that are inside an UpdatePanel. The events are bound in $(document).ready . For example: $(function() { $('div._Foo').bind("mouseover", function(e) { // Do something exciting }); }); Of course, this works fine …

Read More
Sys is undefined

I have an ASP.Net/AJAX control kit project that i am working on. 80% of the time there is no problem. The page runs as it should. If you refresh the page it will sometimes show a javascript error "Sys …

Read More
ModalPopupExtender OK Button click event not firing?

I have a Button inside an UpdatePanel. The button is being used as the OK button for a ModalPopupExtender. For some reason, the button click event is not firing. Any ideas? Am I missing something? <asp:updatepanel id="UpdatePanel1" …

Read More