Question

我尝试使用jScrollPane为自动完成框构建自定义scrollBar。

我在stackoverflow中尝试了很多选项，但它们似乎都没有工作。

如果有办法实现同样的目的，请告诉我。

我试过下面的代码。

var api,autocomplete_init = false; $("#countries").autocomplete({ source: countryList, open: function(){ if(!autocomplete_init){ $('ul.ui-autocomplete').addClass('scroll-pane'); api = $(".scroll-pane").jScrollPane().data('jsp'); autocomplete_init = true; } else { api.reinitialise(); } }, close: function(event, ui) { $('.ui-autocomplete').jScrollPaneRemove(); } }); });

Answer 1

使用jQuery Scrollbar插件

$("#countries").autocomplete({
    "focus": function(){
        var menu = $(this).data("uiAutocomplete").menu.element;
        var focused = menu.find("li:has(a.ui-state-focus)");
        if(menu.parent().hasClass('scroll-wrapper')){
            setTimeout(function(){
                var height = menu.parent().height();
                if(focused.position().top + focused.height() > height){
                    menu.scrollTop(menu.scrollTop() + parseInt(focused.position().top) + focused.height() - height);
                }
            }, 1);
        }
    },
    "open": function(){
        var menu = $(this).data("uiAutocomplete").menu.element;
        menu.addClass('scrollbar-dynamic').addClass('autocomplete-scroll').scrollbar();
    },
    "source": countryList
});

jsFre预览：http://jsfiddle.net/B6U6k/9/

滚动条定制设计＆amp; https://github.com/gromo/jquery.scrollbar

上提供的文档

从自动填充列表中选择项目时，您可能会注意到IE显示水平滚动条。这是因为IE渲染器错误和所选项目的jQuery UI CSS：1px border + margin：-1px（应该将元素移回固定边框偏移）。我认为IE不适用此保证金。所以，用css去掉水平滚动条，或者去除所选项目的边框。

如何在Jquery UI自动完成中使用JScrollpane插件

1 个答案: