title: jQuery Autocomplete appears at top of the HTML, appends to bottom of the body tag
body: <p>I'm using jQuery Autocomplete, but the autocomplete list doesn't appear below the textbox.</p>
  
  <hr>
  
  <p><strong>This is my html:</strong></p>
  
  <pre><code>jquery-ui.css    
  jquery.min.js    
  jquery-ui.min.js
  
  &lt;div class="collapse" id="search-form"&gt;
      &lt;div class="well"&gt;
          &lt;form class="form-inline" method="POST" action="."&gt;
          &lt;div class="form-group" style="margin:5px;"&gt;
              &lt;label&gt;Cliente&lt;/label&gt;
              &lt;input aria-haspopup="true" aria-autocomplete="list" role="textbox" autocomplete="off" class="form-control ui-autocomplete-input ui-autocomplete-loading" id="id_client" name="client" type="text"&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group" style="margin:5px;"&gt;
              &lt;label&gt;Estado&lt;/label&gt;
              &lt;select class="form-control" id="id_status" name="status"&gt;
              &lt;option value="" selected="selected"&gt;-------&lt;/option&gt;
  
              &lt;/select&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group" style="margin:5px;"&gt;
              &lt;label&gt;Creado desde&lt;/label&gt;
              &lt;input class="form-control" data-date-format="dd/mm/yyyy" data-provide="datepicker" id="id_from_date" name="from_date" placeholder="dd/mm/aaaa" type="text"&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group" style="margin:5px;"&gt;
              &lt;label&gt;Creado hasta&lt;/label&gt;
              &lt;input class="form-control" data-date-format="dd/mm/yyyy" data-provide="datepicker" id="id_to_date" name="to_date" placeholder="dd/mm/aaaa" type="text"&gt;
              &lt;/div&gt;
  
              &lt;button type="submit" class="btn btn-success"&gt;Buscar&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      $(function() {
        $("#id_client").autocomplete({
          source: "/api/getclients/",
          minLength: 2,
        });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>All those weird properties auto add themselves when I add ".autocomplete" via jQuery. But when the HTML renders, the autocomplete list appends itself to the bottom of the body tag, and it appears right here:</p>
  
  <p><img src="https://i.imgur.com/CorywpY.png" alt="image"></p>
  
  <p>Any help would be appreciated.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Checking the browser inspector, I realized this:</p>
  
  <pre><code>&lt;ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: none;"&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>It has <code>top: 0px; left: 0px;</code>, but that's added automaticaly. I've tried <code>position: { my : "right top", at: "right bottom" }</code> but it didn't work.</p>