jQuery Autocomplete appears at top of the HTML, appends to bottom of the body tag

Question

I'm using jQuery Autocomplete, but the autocomplete list doesn't appear below the textbox.

---

This is my html:

jquery-ui.css    
jquery.min.js    
jquery-ui.min.js

<div class="collapse" id="search-form">
    <div class="well">
        <form class="form-inline" method="POST" action=".">
        <div class="form-group" style="margin:5px;">
            <label>Cliente</label>
            <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">
            </div>

            <div class="form-group" style="margin:5px;">
            <label>Estado</label>
            <select class="form-control" id="id_status" name="status">
            <option value="" selected="selected">-------</option>

            </select>
            </div>

            <div class="form-group" style="margin:5px;">
            <label>Creado desde</label>
            <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">
            </div>

            <div class="form-group" style="margin:5px;">
            <label>Creado hasta</label>
            <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">
            </div>

            <button type="submit" class="btn btn-success">Buscar</button>
        </form>
    </div>
</div>

<script type="text/javascript">
    $(function() {
      $("#id_client").autocomplete({
        source: "/api/getclients/",
        minLength: 2,
      });
    });
</script>

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:

Any help would be appreciated.

Edit

Checking the browser inspector, I realized this:

<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;">

</ul>

It has top: 0px; left: 0px;, but that's added automaticaly. I've tried position: { my : "right top", at: "right bottom" } but it didn't work.

Answer 1

I fixed it by updating the jQuery-UI script. It now works flawlessly.

Answer 2

This issue can be resolved by using the appendTo and/or position attributes.

Ex.

      $("#id_client").autocomplete({
        source: "/api/getclients/",
        minLength: 2,
        position: { my : "right top", at: "right bottom" },
        appendTo: '#myContainer'
      });