jquery - jquery ui.autocomplete 的兼容性问题

Question

我正在使用 jquery ui.autocomplete。这在 IE 11 中运行良好。但是，当我在 Mozilla(最新)或 chrome(最新)中运行我的项目时，我遇到了兼容性问题。我对此有两个问题。

1. 如何解决此兼容性问题

2. 处理这些兼容性问题的最佳方法是什么？不同的浏览器有不同的兼容性问题，因此即使我使我的项目与特定浏览器兼容，它仍然可能在另一个浏览器中不兼容。

   有没有办法让项目兼容所有浏览器？

现在，我用来尝试实现此自动完成功能的代码如下:

$(function () {
$.extend($.ui.autocomplete.prototype, {
    _renderMenu: function (ul, items) {
        $(ul).unbind("scroll");
        var self = this;
        self._scrollMenu(ul, items);
    },
    _scrollMenu: function (ul, items) {
        var self = this;
        var maxShow = 10;
        var results = [];
        var pages = Math.ceil(items.length / maxShow);
        results = items.slice(0, maxShow);

        if (pages > 1) {
            $(ul).scroll(function () {
                if (isScrollbarBottom($(ul))) {
                    ++window.pageIndex;
                    if (window.pageIndex >= pages) return;
                    results = items.slice(window.pageIndex * maxShow, window.pageIndex * maxShow + maxShow);
                    //append item to ul
                    $.each(results, function (index, item) {
                        self._renderItem(ul, item);
                    });
                    self.menu.refresh();
                    // size and position menu
                    ul.show();
                    self._resizeMenu();
                    ul.position($.extend({
                        of: self.element
                    }, self.options.position));
                    if (self.options.autoFocus) {
                        self.menu.next(new $.Event("mouseover"));
                    }
                }
            });
        }

        $.each(results, function (index, item) {
            self._renderItem(ul, item);
        });
    }
});
function isScrollbarBottom(container) {
    var height = container.outerHeight();
    var scrollHeight = container[0].scrollHeight;
    var scrollTop = container.scrollTop();
    if (scrollTop >= scrollHeight - height) {
        return true;
    }
    return false;
};
$("#txtfrom").autocomplete({
    source: availableTags,
    minLength: 0,
    delay: 0
}).focus(function () {
    //reset result list's pageindex when focus on
    window.pageIndex = 0;
    $(this).autocomplete("search");
});
$("#txtTo").autocomplete({
    source: availableTags,
    minLength: 0,
    delay: 0
}).focus(function () {
    //reset result list's pageindex when focus on
    window.pageIndex = 0;
    $(this).autocomplete("search");
});});

下面列出了兼容性问题:

• IE11 - 工作正常。
• Google Chrome - 滚动条不可见。
• FireFox - 无法从列表中选择项目。

有人可以告诉我可以采取什么措施来处理此兼容性问题吗？提前致谢。

Answer 1

您是否尝试过更改自动完成下拉菜单的级别？

.ui-autocomplete {
    z-index: 1000;
}

.ui-autocomplete {
    z-index: 10000;;
}

.ui-autocomplete {
    z-index: 10000 !important;
}