Compatibility issue with jquery ui.autocomplete -
i using jquery ui.autocomplete. working fine in ie 11. however, having compatibility issues when run project in mozilla(latest) or chrome(latest). have 2 problems this.
- how resolve compatibility issue and
what best way handle these compatibility issues? different browsers have different compatibility issues , if make project compatible particular browser, still non-compatible in another.
is not there way make project compatible in browser?
now, code used try , achieve auto-complete feature provided 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 ul $.each(results, function (index, item) { self._renderitem(ul, item); }); self.menu.refresh(); // size , 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"); });});
the compatibility issues listed below:
- ie11 - working fine.
- google chrome - scroll bar not visible.
- firefox - unable select item list.
would let me know can done handle compatibility issue. in advance.
have tried change level of autocomplete dropdown?
.ui-autocomplete { z-index: 1000; } .ui-autocomplete { z-index: 10000;; } .ui-autocomplete { z-index: 10000 !important; }
Comments
Post a Comment