如何定位 jQuery 自动完成小部件

Question

我在我的页面上使用 Mottie 虚拟键盘 (https://github.com/Mottie/Keyboard/wiki)。它附加到输入元素，并使用 jQuery 自动完成功能在用户输入时显示结果。一切正常，除了自动完成结果的位置。

我试过在自动完成中设置位置元素，但无论我做什么，它总是显示在左侧，与虚拟键盘处于同一水平顶部。有谁知道我如何重新定位 "autocomplete-result-widget"？

html代码：

<div class="form-inline marginTopSearchBar" role="form" runat="server">
<div class="icon-addon addon-lg">
    <asp:TextBox ID="txtSearch" placeholder="Søk (eksempel: sag)" ClientIDMode="Static" runat="server" AutoCompleteType="Disabled" class="form-control"></asp:TextBox>
    <label for="txtSearch" class="glyphicon glyphicon-search" title="search"></label>
</div>

我的 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}",
                " q w e r t y u i o p \u00e5 ",
                "a s d f g h j k l \u00f8 \u00e6 ",
                " z x c v b n m -",
                "{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();    
};

Answer 1

目前，自动完成菜单位置是hardcoded into the extension script:

base.$autocomplete.menu.element.position({
    of : base.$keyboard,
    my : 'right top',
    at : 'left top',
    collision: 'flip'
});

添加一个允许更改 position 选项的选项并不难。

更新：在刚刚推送到master分支的更新中，autocomplete extension will now accept a position option (demo):

$('#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'
        }
    });

如何定位 jQuery 自动完成小部件

How to position the jQuery autocomplete widget

jquery

autocomplete

virtual-keyboard