title: Set value to a hidden field using jquery not working during AutoComplete
body: <p>There's this simple form, which sends <code>get-request</code> to the server.</p>
  
  <pre><code>&lt;form id="form0" method="get"&gt;
    &lt;input id="searchTerm" type="hidden" name="searchTerm"&gt;
    &lt;input type="search" id="userSearchTerm" /&gt;
    &lt;input type="submit" value="submit" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And I use jquery-ui <code>auto-complete</code> to get the json data from the server and yes, it works fine.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      $("#userSearchTerm").autocomplete({
          source: function (request, response) {
              $.ajax({
                  url: "/Home/AutoComplete",
                  type: "POST",
                  dataType: "json",
                  data: { term: request.term },
                  success: function (data) {
                      alert("successfully got the data");
                      response($.map(data, function (item) {
                          return { name: item.name, value: item.age };
                      }))
  
                  }
              })
          },
          select: function (e, ui) {
              alert(ui.item.name);
              $('#searchTerm').val(ui.item.name);
              $("#form0").submit();
          }
  
  
      });
      return false;
  })
  </code></pre>
  
  <p></p>
  
  <p>I get the alert messages like "<strong>successfully got the data</strong>" as well as the "<strong>item name</strong>". Also checked with <code>Network</code> tab under Google Chrome -> the json response is there.</p>
  
  <p>The problem is that, I cannot make the form submit. If I remove the line, <code>$('#searchTerm').val(ui.item.name);</code> the form is getting submitted and everything's fine.</p>
  
  <p>Could any one point me in the right direction? Why not this simple javascript is not running?</p>