移动jQueryUI自动完成位置

如何将jQueryUI自动完成显示列表的位置向下移动一点？移动jQueryUI自动完成位置

我可以使用var ul=$("#field").autocomplete().autocomplete('widget');进行选择。

然而，ul使用offset()不起作用，因为ul定位在打开窗口小部件时。请参阅http://jsfiddle.net/tu0usot8/。

2016-01-31 user1032531

您可以在下面的代码片段，我搬到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;"> 
 
&nbsp;&nbsp;&nbsp; 
 
<span id="results_count"></span> 
 
<br><br> 
 
<input type="button" value="OK">

来源

2016-01-31 18:16:09 gaetanoM

这些似乎是更“正确”的解决方案，但是，实现目前显示它向右而不是向下移动。我们能做相对运动吗？ – user1032531

我更新了片段，现在就像用偏移量I重复位置一样。 – gaetanoM

啊，你知道了！介意解释为什么'{我的：“左上角+20”，在：“左下角”}做它做的事情？ – user1032531

-1

jQueryUI插件更改了自动完成元素样式，因此它将定位在文本字段旁边。因为样式属性只能使用!important关键字被覆盖，并且不建议更改插件的代码绕过这一点，你可以使用下面的CSS：

.ui-autocomplete { 
    top: 100px !important; 
}

来源

2016-01-31 18:10:04

嗨Eburge，你知道，如果自动完成列表中的位置始终是相同的，无论主题，等？ – user1032531

不知道这是最好的，但一个选项是：

open: function(event, ui) { 
     var ul = $(this).autocomplete('widget'),offset=ul.offset(); 
     ul.offset({top:offset.top+20}) //Move 20px down 
    },

来源

2016-01-31 18:13:07 user1032531

移动jQueryUI自动完成位置

回答

相关问题