如何放置jQuery自动完成小部件 [英] How to position the jQuery autocomplete widget

问题描述

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

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

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文件:

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

推荐答案

当前，自动完成菜单的位置为

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

添加选项以允许更改position选项并不困难.

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

更新:在刚刚推送到 master 分支的更新中，

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

这篇关于如何放置jQuery自动完成小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！