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>

当我添加＆＃34; .autocomplete＆＃34;时，所有这些奇怪的属性都会自动添加。通过jQuery。但是当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'
      });

Answer 2

我通过更新jQuery-UI脚本来修复它。它现在完美无缺。

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

2 个答案: