jQuery 自动完成插件建议弹出窗口在页面放大后位置不正确

Question

我使用jQuery自动完成插件。

当我访问页面并开始在自动完成文本框中键入时 - 建议会正确显示，如果我放大（缩小或缩小）页面，并在同一个框中键入文本 - 建议div 的位置不正确。

自动完成在IE和FF中都可以正常工作。

如果我在第一次使用自动完成之前缩放页面 - 自动完成工作正常。

j查询界面：1.9.0铬： 版本 22.0.1229.94 m

我该如何解决这个问题？

Answer 1

我刚刚遇到了完全相同的问题，并正在寻找整整一周的解决方案。

你需要添加以下 css 来覆盖 jquery 生成的position: relative

.ui-autocomplete {
    position: absolute!important;
}

我希望我的回答能帮助某人。

Answer 2

帮助我的一种方法是记住上次打开的自动完成输入和写入事件处理程序函数，以便浏览器窗口的缩放在每次调整大小时手动刷新。同样的事情也适用于日期选择器。您甚至可以通过设置一个小的超时来保存一些刷新：

        var lastOpenedInput;
        myInput.on('autocompleteopen', function (event) {
            lastOpenedInput = $(event.target);
        }
        $(window).on('resize', function () {
            if (lastOpenedInput !== undefined) {
                if (lastOpenedInput.autocomplete('widget').css('display') !== 'none') {
                    lastOpenedInput.autocomplete('search');
                }
                if (lastOpenedInput.datepicker('widget').css('display') !== 'none') {
                    lastOpenedInput.datepicker('hide');
                    setTimeout(function () {
                        lastOpenedInput.datepicker('show');
                    }, 1000);
                }
            }
        });