jQuery 自动完成显示在 HTML 的顶部,附加到 body 标签的底部
jQuery Autocomplete appears at top of the HTML, appends to bottom of the body tag
我正在使用 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" }
但没用。
我正在使用 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" }
但没用。