How to position the jQuery autocomplete widget

问题:

I'm using Mottie virtual keyboard (https://github.com/Mottie/Keyboard/wiki) on my page. It's attached to a input element, and it's using the jQuery autocomplete to show results as the user is typing. Everything is working fine, except the position of the autocomplete results.

I've tried setting the position element in autocomplete, but no matter what i do, it's always shown to the left, at the same horizontal top as the virtual keyboard. Does anyone know how i can re-position the "autocomplete-result-widget"?

The html code:

<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>

My Autocomplete.js file:

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

回答1:

Currently, the autocomplete menu position is hardcoded into the extension script:

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

It would not be difficult to add an option to allow changing the position options.

---

Update: In an update that was just pushed to the master branch, the 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'
        }
    });