如何定位jQuery自动完成小部件
我在我的页面上使用Mottie虚拟键盘（ https://github.com/Mottie/Keyboard/wiki ）。 它附加到一个输入元素，它使用jQuery自动完成function在用户输入时显示结果。 一切都运行正常，除了自动完成结果的位置。
我已经尝试在自动完成中设置位置元素，但无论我做什么，它总是显示在左侧，与虚拟键盘位于同一水平顶部。 有谁知道我如何重新定位“autocomplete-result-widget”？
HTML代码：
我的Autocomplete.js文件：
$(document).ready(function () { var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_initializeRequest(InitializeRequest); prm.add_endRequest(EndRequest); // Place here the first init of the autocomplete InitAutoComplete(); /* // Getter var position = $("#txtSearch").autocomplete("option", "position"); console.log(position); // Setter $("#txtSearch").autocomplete("option", "position", { my: "right top", at: "right bottom" }); position = $("#txtSearch").autocomplete("option", "position"); console.log(position);*/ }); function InitializeRequest(sender, args) { } function EndRequest(sender, args) { // after update occures in UpdatePanel, re-init the Autocomplete $("#txtSearch").val(''); InitAutoComplete(); } function InitAutoComplete() { $('#txtSearch:eq(0)').keyboard({ /*position: {at2: 'center bottom'},*/ layout: 'custom', usePreview: false, //only use the main input customLayout: { 'default': [ " 1 2 3 4 5 6 7 8 9 0 {bksp}", " qwertyuiop \u00e5 ", "asdfghjkl \u00f8 \u00e6 ", " zxcvbnm -", "{space}" ] }, display: { 'bksp': '<---' } }) .autocomplete({ source: function (request, response) { $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "AutoCompleteService.asmx/GetData", data: "{'prefixText':'" + document.getElementById('txtSearch').value + "'}", dataType: "json", success: function (data) { response($.map(data.d, function (item) { return { label: item.Name, value: item.Value } })) } }); }, //position: { my : "right top", at: "right bottom", of: "#txtSearch" }, minLength: 1, autoFocus: true, delay: 200, focus: function (event, ui) { event.preventDefault(); }, select: function (event, ui) { event.preventDefault(); $("#txtSearch").val(ui.item.label); autoCompleteSelected(ui.item.value); //postback with its value }, open: function () { $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); }, close: function () { $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); } }) .addAutocomplete() .addTyping(); };
目前，自动完成菜单位置已硬编码到扩展脚本中 ：
base.$autocomplete.menu.element.position({ of : base.$keyboard, my : 'right top', at : 'left top', collision: 'flip' });
添加一个允许更改position选项的选项并不困难。
更新：在刚刚推送到主分支的更新中， 自动完成扩展现在将接受位置选项（ 演示 ）：
$('#keyboard') .keyboard() .autocomplete({ source: availableTags }) .addAutocomplete({ position: { of: null, // when null, element will default to kb.$keyboard my: 'center top', // position under keyboard at: 'center bottom', collision: 'flip' } });