如何将jQueryUI自动完成显示列表的位置向下移动一点?移动jQueryUI自动完成位置
我可以使用var ul=$("#field").autocomplete().autocomplete('widget');
进行选择。
然而,ul
使用offset()
不起作用,因为ul
定位在打开窗口小部件时。请参阅http://jsfiddle.net/tu0usot8/。
如何将jQueryUI自动完成显示列表的位置向下移动一点?移动jQueryUI自动完成位置
我可以使用var ul=$("#field").autocomplete().autocomplete('widget');
进行选择。
然而,ul
使用offset()
不起作用,因为ul
定位在打开窗口小部件时。请参阅http://jsfiddle.net/tu0usot8/。
您可以在下面的代码片段,我搬到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">
jQueryUI插件更改了自动完成元素样式,因此它将定位在文本字段旁边。 因为样式属性只能使用!important
关键字被覆盖,并且不建议更改插件的代码绕过这一点,你可以使用下面的CSS:
.ui-autocomplete {
top: 100px !important;
}
嗨Eburge,你知道,如果自动完成列表中的位置始终是相同的,无论主题,等? – user1032531
不知道这是最好的,但一个选项是:
open: function(event, ui) {
var ul = $(this).autocomplete('widget'),offset=ul.offset();
ul.offset({top:offset.top+20}) //Move 20px down
},
这些似乎是更“正确”的解决方案,但是,实现目前显示它向右而不是向下移动。我们能做相对运动吗? – user1032531
我更新了片段,现在就像用偏移量I重复位置一样。 – gaetanoM
啊,你知道了!介意解释为什么'{我的:“左上角+20”,在:“左下角”}做它做的事情? – user1032531