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

标签 javascript jquery html jquery-ui jquery-autocomplete

我正在使用 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 标签的底部,它就出现在这里:

image

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

编辑

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

<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"} 但它没有用。

最佳答案

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

例如

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

关于javascript - jQuery Autocomplete 出现在 HTML 的顶部,附加到 body 标签的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35489667/

相关文章:

javascript - 如何在 Symfony 3 中以 Json 形式从存储库返回对象

html - CSS3 HTML5 全景查看器

html - 如何隐藏一个div并将其替换为reactjs中的另一个div?

javascript - 如何在 angularjs 中创建和更新 JSON 文件?

javascript - 合并 minify 和压缩 CSS/JavaScript

jquery - 如何确保 Accordion 选项卡始终打开但一次只打开一个

javascript - PhoneGap(网络移动应用程序)——在页面之间传输数据

javascript - 自动放置流程图形状的算法

javascript - Node.js 使用 officegen 创建和下载 word 文档

javascript - 如何在 Jest 中跟踪失败的异步测试?