Jquery ui.autocomplete compatibility issue

Question

I am using jquery ui.autocomplete . This works fine in IE 11. However, I have compatibility issues when starting my project in Mozilla (last) or Chrome (last). I have two problems with this.

• How to solve this compatibility problem and

• What is the best way to deal with these compatibility issues? Different browsers have different compatibility problems, so even if I am compatible with my project with a specific browser, it can still be incompatible in another.

  Is there a way to make the project compatible in all browsers?

Now the code that I used for this autocomplete function is shown below:

$(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 pageindex when focus on
    window.pageIndex = 0;
    $(this).autocomplete("search");
});
$("#txtTo").autocomplete({
    source: availableTags,
    minLength: 0,
    delay: 0
}).focus(function () {
    //reset result list pageindex when focus on
    window.pageIndex = 0;
    $(this).autocomplete("search");
});});

Compatibility issues are listed below:

• IE11 - working fine.
• Google Chrome - .
• FireFox - .

- , . .

Answer 1

?

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

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

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