javascript - jQuery UI 自动完成定位问题

Question

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

Answer 1

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

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

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