移动 jQueryUI 自动完成的位置
Move position of jQueryUI autocomplete
如何将 jQueryUI 自动完成显示列表的位置向下移动一点?
我可以 select 使用 var ul=$("#field").autocomplete().autocomplete('widget');
。
但是,在 ul
上使用 offset()
不起作用,因为 ul
在打开小部件时定位。
jQueryUI 插件更改了自动完成元素样式,使其位于文本字段旁边。
因为style属性只能用!important
关键字覆盖,不建议改插件代码绕过,可以用下面的CSS:
.ui-autocomplete {
top: 100px !important;
}
不确定它是否是最好的,但一种选择是:
open: function(event, ui) {
var ul = $(this).autocomplete('widget'),offset=ul.offset();
ul.offset({top:offset.top+20}) //Move 20px down
},
您可以像下面的代码片段一样使用 "position option" 字段,我将 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 自动完成显示列表的位置向下移动一点?
我可以 select 使用 var ul=$("#field").autocomplete().autocomplete('widget');
。
但是,在 ul
上使用 offset()
不起作用,因为 ul
在打开小部件时定位。
jQueryUI 插件更改了自动完成元素样式,使其位于文本字段旁边。
因为style属性只能用!important
关键字覆盖,不建议改插件代码绕过,可以用下面的CSS:
.ui-autocomplete {
top: 100px !important;
}
不确定它是否是最好的,但一种选择是:
open: function(event, ui) {
var ul = $(this).autocomplete('widget'),offset=ul.offset();
ul.offset({top:offset.top+20}) //Move 20px down
},
您可以像下面的代码片段一样使用 "position option" 字段,我将 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">