Question

我正在使用jquery ui.autocomplete 。这在IE 11中工作正常。但是，当我在Mozilla（最新）或chrome（最新）中运行我的项目时，我遇到了兼容性问题。我有两个问题。

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

是否有办法让项目在所有浏览器中兼容？

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

$(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;
}

与jquery ui.autocomplete的兼容性问题

1 个答案: