javascript - jQuery Autocomplete 出现在 HTML 的顶部，附加到 body 标签的底部

Question

我正在使用 jQuery 自动完成，但自动完成列表没有出现在文本框下方。

---

这是我的 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>

当我通过 jQuery 添加“.autocomplete”时，所有这些奇怪的属性都会自动添加。但是当 HTML 呈现时，自动完成列表将自己附加到 body 标签的底部，它就出现在这里:

如有任何帮助，我们将不胜感激。

编辑

检查浏览器检查器，我意识到这一点:

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

它有 top: 0px; left: 0px;，但这是自动添加的。我试过 position: { my : "right top", at: "right bottom"} 但它没有用。

Answer 1

这个问题可以通过使用 appendTo 来解决。和/或 position属性。

例如

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