与jquery ui.autocomplete的兼容性问题

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

我如何解决这个兼容性问题和

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

没有办法使项目在所有浏览器兼容？做工精细 -

IE11：

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

的兼容性问题如下：

现在，我曾经尝试和实现这种自动完成功能的代码如下提供。

谷歌浏览器 - 滚动条不可见。

FireFox - 无法从列表中选择一个项目。

有人会告诉我可以做些什么来处理这个兼容性问题。提前致谢。

来源

2014-09-19 antony.ouseph.k

你能提供一个jsfiddle吗？这在IE 11中起作用，并且在其他浏览器中有错误？ – 2014-09-19 06:53:07

嗯，我只是试图创建一个小提琴，但我失败了。我是js小提琴新手。不过，我会再试一次，如果成功的话会放在这里。 – 2014-09-19 07:37:56

那么，这里有一些[起点]（http://jsfiddle.net/qLtsm05w/1/），但它目前无法在任何地方工作（我不知道你的CSS和HTML，所以你应该更新）。 – 2014-09-19 07:41:23

您是否尝试更改自动填充下拉菜单的级别？

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

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

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

来源

2014-10-02 13:10:01 douglasjam

与jquery ui.autocomplete的兼容性问题

回答

相关问题