title: jquery ui autocomplete - server results not appearing
body: <p>jQuery UI autocomplete is fetching valid json results from the server, but does not insert them into DOM / display in browser. When I embed the results in the page, autocomplete works as expected.</p>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
      $('#query').autocomplete({
          source: '/ajax/abc',
          /*source: ['alpha', 'beta', 'gamma'],*/
          minLength: 2,
          select: function(e,ui) {
              $('#query').val( ui.item.value );
              $('form#search').submit(); 
          }
      });
  </code></pre>
  
  <p>JSON result from /ajax/abc (detected using Firebug):</p>
  
  <blockquote>
    <p>["alpha","beta","gamma"]</p>
  </blockquote>
  
  <p>Generated source from Firefox after typing "gam" into the input</p>
  
  <p>(Server):</p>
  
  <pre><code>&lt;ul style="z-index: 1; top: 0px; left: 0px; display: none;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>(Embedded results):</p>
  
  <pre><code>&lt;ul style="z-index: 1; top: 31px; left: 185px; display: block; width: 149px;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"&gt;&lt;li role="menuitem" class="ui-menu-item"&gt;&lt;a tabindex="-1" class="ui-corner-all"&gt;gamma&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
  </code></pre>