jquery와의 호환성에 대해 ui.autocomplete

Question

jquery ui.autocomplete을 사용하고 있습니다. IE 11에서는 정상적으로 작동합니다. 그러나 Mozilla (최신 버전) 또는 Chrome (최신 버전)에서 프로젝트를 실행할 때 호환성 문제가 발생합니다. 나는 이것에 두 가지 문제가있다.

1. 어떻게이 호환성 문제와

2. 이러한 호환성 문제를 처리하는 가장 좋은 방법은 무엇입니까를 해결하는 방법은 무엇입니까? 서로 다른 브라우저는 서로 다른 호환성 문제가 있으므로 내 프로젝트를 특정 브라우저와 호환 가능하게 만들지 만 여전히 다른 프로젝트와 호환되지 않을 수 있습니다.

   모든 브라우저에서 프로젝트를 호환 가능하게 만들 수있는 방법이 없습니까? 작업 파인 -

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

     호환성 문제는 다음과 같습니다 : 이제

는, 내가 시도하고이 자동 완성 기능을 달성하기 위해 사용되는 코드는 아래에 제공 .

Google 크롬 - 스크롤 막대가 표시되지 않습니다.

FireFox - 목록에서 항목을 선택할 수 없습니다.

이 호환성 문제를 처리하기 위해 수행 할 수있는 작업을 알려주시겠습니까? 미리 감사드립니다.

Answer 1

자동 완성 드롭 다운의 레벨을 변경해 보셨습니까?

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

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

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