jQuery UI 自动完成定位问题答案

【问题标题】：jQuery UI autocomplete positioning issuesjQuery UI 自动完成定位问题
【发布时间】：2019-04-30 23:01:12
【问题描述】：

我看过一些与此类似的其他帖子，但没有真正回答这个特定问题。尝试在项目中使用开箱即用的 jQuery UI 自动完成小部件。它在我的输入下定位良好（不像其他帖子问题说它从 0,0 开始），但是当我上下调整窗口大小时自动建议结果显示，位置不跟随窗口大小回流的输入框。它停留在它被调用时的位置。如果您在输入中键入另一个字母，结果框将跳回到输入下方的正确位置，但它不会通过窗口大小更改事件来执行此操作？ TIA。

JS Fiddle 示例： 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

【解决方案1】：

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

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

它有效。我认为在真实页面上你并不需要这些。

【讨论】：

如果你删除它们，它会将 div 放在左/左，但在实际应用程序中，自动完成框位于屏幕右侧，因此问题确实会导致问题。我只有页边距来展示定位问题
不幸的是，这也行不通，如果我从头开始构建作为解决方法可能会起作用，但这是在一个企业应用程序中，其中搜索框已经在我不能的预定义区域中真的破解。如果将文本对齐设置为中心，我需要一个基本上可以工作的解决方案。如果应用没有响应，ta-right 会起作用。
我在下面的 URL 中看到了同样问题的另一个示例，尽管他似乎也没有提供解决方案。一般来说，它看起来是 jQuery UI 的定位错误，但我必须找到解决方法。 jsbin.com/orifoy/2
我玩了一会儿，然后尝试了这个：jsfiddle.net/m0L86d7m/3 但不幸的是，没有办法手动重新打开盒子（就像open 方法）

【解决方案2】：

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

【讨论】：