jQuery UI自动完成定位问题

Posted 2021-04-04

我已经看过其他一些与此类似的帖子但没有真正回答这个具体问题。试图在项目中使用开箱即用的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;
}

答案

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

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

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

另一答案

您可以添加窗口调整大小事件侦听器，然后调用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.