jQuery UI自动完成定位问题

问题描述 投票:1回答:2

我已经看过其他一些与此类似的帖子但没有真正回答这个具体问题。试图在项目中使用开箱即用的jQuery UI自动完成小部件..它在我的输入下定位很好(不像其他帖子问题,它从0,0开始),但是当我上下调整窗口大小时自动建议结果显示,位置不跟随窗口大小重排的输入框。它停留在它被调用时的位置。如果在输入中键入另一个字母,结果框将在正确位置的输入下跳回,但它不会通过窗口大小更改事件执行此操作? TIA。

JS小提琴示例:http://jsfiddle.net/thomaswicker/m0L86d7m/

JAVASCRIPT:

$('input').autocomplete({
    search: function(event, ui) {
        $('section .test ul').empty();
    },
    source: ["something", "something-else"]
}).data('autocomplete')._renderItem = function(ul, item) {

    return $('<li/>')
   .data('item.autocomplete', item)
   .append(item.value)
   .appendTo($('section .test ul'));
};

HTML:

<section>
    <input id="autocomplete"/>
    <div class="test">Output goes here:<br/><ul></ul></div>
</section>

CSS:

section {
   width: 400px;
   height: 100px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 50px;
}
javascript jquery-ui positioning jquery-ui-autocomplete
2个回答
0
投票

设置为auto的边距是问题所在。如果删除这两行

margin-left: auto;
margin-right: auto;

有用。我认为在真实的页面上你并不需要那些。


0
投票

您可以添加窗口调整大小事件侦听器,然后调用jQuery UI .position() method。你可以在suggest() method in the source code看到这个。

添加它的一个好地方是在Autocomplete create event中,因为在创建小部件期间只调用一次。

它看起来像这样:

$('input').autocomplete({
    ...
    ...
    create: function(event, ui) {
        var widget = $(this).data('ui-autocomplete');
        var ul = widget.menu.element;           
        var positionProps = $.extend({ of: widget.element }, widget.options.position);

        // reposition autocomplete dropdown when window resizes
        $(window).on('resize', function() {
            ul.position(positionProps);
        });
    },
    ...
    ...
});

Here's the working JSFiddle.


推荐问答