如何稍微移动jQueryUI自动完成显示列表的位置?
我可以使用var ul=$("#field").autocomplete().autocomplete('widget');
选择它。
然后,在offset()
上使用ul
不起作用,因为在打开小部件时ul
处于定位状态。
答案 0 :(得分:1)
不确定它是否是最好的,但有一个选项是:
open: function(event, ui) {
var ul = $(this).autocomplete('widget'),offset=ul.offset();
ul.offset({top:offset.top+20}) //Move 20px down
},
答案 1 :(得分:1)
您可以使用"位置选项"字段就像在下面的代码片段中我向右移动了100个自动完成。
var ul=$("#field").autocomplete({ source: countries_starting_with_A, minLength: 1, position: { my : "left top+20", at: "left bottom" }, select: function(event, ui) { ............................................
有关详细信息,您可能会看到position
$(function () {
var countries_starting_with_A = [
{
"id": "1",
"value": "Afghanistan",
"label": "Afghanistan"
},
{
"id": "17",
"value": "Albania",
"label": "Albania"
},
{
"id": "18",
"value": "Algeria",
"label": "Algeria"
},
{
"id": "20",
"value": "American Samoa",
"label": "American Samoa"
},
{
"id": "22",
"value": "Andorra",
"label": "Andorra"
},
{
"id": "10",
"value": "Angola",
"label": "Angola"
},
{
"id": "11",
"value": "Anguilla",
"label": "Anguilla"
},
{
"id": "23",
"value": "Antarctica",
"label": "Antarctica"
},
{
"id": "24",
"value": "Antigua and Barbuda",
"label": "Antigua and Barbuda"
},
{
"id": "25",
"value": "Argentina",
"label": "Argentina"
},
{
"id": "26",
"value": "Armenia",
"label": "Armenia"
},
{
"id": "27",
"value": "Aruba",
"label": "Aruba"
},
{
"id": "28",
"value": "Australia",
"label": "Australia"
},
{
"id": "29",
"value": "Austria",
"label": "Austria"
},
{
"id": "12",
"value": "Azerbaijan",
"label": "Azerbaijan"
}
];
var ul=$("#field").autocomplete({
source: countries_starting_with_A,
minLength: 1,
position: { my : "left top+20", at: "left bottom" },
select: function(event, ui) {
// feed hidden id field
$("#field_id").val(ui.item.id);
// update number of returned rows
$('#results_count').html('');
},
open: function(event, ui) {
// update number of returned rows
var len = $('.ui-autocomplete > li').length;
$('#results_count').html('(#' + len + ')');
},
close: function(event, ui) {
// update number of returned rows
$('#results_count').html('');
},
// mustMatch implementation
change: function (event, ui) {
if (ui.item === null) {
$(this).val('');
$('#field_id').val('');
}
}
}).autocomplete('widget');
console.log(ul)
// mustMatch (no value) implementation
$("#field").focusout(function() {
if ($("#field").val() === '') {
$('#field_id').val('');
}
});
});

<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<label for="field_id">ID</label>
<input id="field_id" type="text" style="width: 40px;">
<label for="field">Countries (starting with A)</label>
<input id="field" type="text" style="width: 200px;">
<span id="results_count"></span>
<br><br>
<input type="button" value="OK">
&#13;
答案 2 :(得分:-1)
jQueryUI插件更改了自动完成元素样式,因此它将位于文本字段旁边。
因为style属性只能使用!important
关键字覆盖,并且不建议更改插件的代码以绕过它,所以可以使用以下CSS:
.ui-autocomplete {
top: 100px !important;
}