title: Fire DropDownList SelectedIndexChanged event when using JQuery-UI Autocomplete
body: <p>I'd like to post back to the server when my combobox changes value (ideally with an AJAX call in an update panel - but one thing at a time).  I'm using the I'm using the <code>jQuery UI</code> <a href="http://jqueryui.com/autocomplete/#combobox" rel="nofollow"><code>AutoComplete Combobox</code></a> and, unfortunately, it's interferring with the change event as I'm not changing the drop down list directly.</p>
  
  <p>I'm using the implementation detailed <a href="http://www.learningjquery.com/2010/06/a-jquery-ui-combobox-under-the-hood" rel="nofollow">here</a>.</p>
  
  <p>Here are some choice snippets </p>
  
  <p><strong>HTML Body Code</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;span class="ui-widget"&gt;
      &lt;asp:DropDownList ID="cboLang" runat="server" AutoPostBack="True"&gt;
          &lt;asp:ListItem Value="ActionScript"&gt;ActionScript&lt;/asp:ListItem&gt;
          &lt;asp:ListItem Value="AppleScript"&gt;AppleScript&lt;/asp:ListItem&gt;
          &lt;asp:ListItem Value="Asp"&gt;Asp&lt;/asp:ListItem&gt;
      &lt;/asp:DropDownList&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p><strong>Autocomplete Javascript</strong></p>
  
  <p>This is the autocomplete js that exexutes whenever a selection has been made.  It will always run the function <code>_removeIfInvalid</code></p>
  
  <pre class="lang-js prettyprint-override"><code>this._on(this.input, {
      autocompleteselect: function (event, ui) {
          ui.item.option.selected = true;
          this._trigger("select", event, {
              item: ui.item.option
          });
      },
  
      autocompletechange: "_removeIfInvalid"
  });
  </code></pre>
  
  <p><strong>Server Side Code</strong></p>
  
  <pre class="lang-vb prettyprint-override"><code>Protected Sub cboLang_SelectedIndexChanged(sender As Object, e As EventArgs) _
          Handles cboLang.SelectedIndexChanged
      'DO OTHER STUFF HERE
      Dim alert = String.Format("alert('{0}');", "Hi")
      ScriptManager.RegisterStartupScript(Me, Me.GetType, "DropDownChange", alert, True)
  End Sub
  </code></pre>
  
  <p><strong>Generated Code</strong></p>
  
  <p>When an ASP.NET renders the page with the attached event, it produces the following code</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script type="text/javascript"&gt;
  //&lt;![CDATA[
  var theForm = document.forms['ctl00'];
  if (!theForm) {
      theForm = document.ctl00;
  }
  function __doPostBack(eventTarget, eventArgument) {
      if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
          theForm.__EVENTTARGET.value = eventTarget;
          theForm.__EVENTARGUMENT.value = eventArgument;
      theForm.submit();
      }
  }
  //]]&gt;
  &lt;/script&gt;
  
  &lt;select id="cboLang" onchange="javascript:setTimeout('__doPostBack(\'cboLang\',\'\')', 0)"
      name="cboLang" style="display: none;"&gt;
  </code></pre>
  
  <p><strong>Question</strong></p>
  
  <p>Where can I go about making changes to ensure that with each update to the autcomplete input, I can trigger a server event?</p>