jQuery ui 自动完成和 jScrollPane

Question

我正在尝试使用带有 jScrollPane 的 jQuery ui 自动完成组件来自定义溢出滚动条

HTML：

<label>Tags</label>
<input type="text" class="input_autocomplete">

CSS：

ul.ui-autocomplete{
width: 200px;
max-height: 120px;
overflow: auto;
background: #FFFFFF;
border: 1px solid #CCCCCC;

}
ul.ui-autocomplete li{
line-height:29px;
height: 29px;
min-width: 100%;
border-bottom: 1px solid #FFFFFF;
background:#dcdcdc;
}
ul.ui-autocomplete li:nth-child(2n+1){
background:#ebebeb;
}

脚本：

<script type="text/javascript"> 
$(function() {
    var availableTags = ["ActionScript", 
    "AppleScript", 
    "Asp", 
    "BASIC", 
    "C", 
    "C++", 
    "Clojure", 
    "COBOL", 
    "ColdFusion", 
    "Erlang", 
    "Fortran", 
    "Groovy", 
    "Haskell", 
    "Java", 
    "JavaScript", 
    "Lisp", 
    "Perl", 
    "PHP", 
    "Python", 
    "Ruby", 
    "Scala", 
    "Scheme",
    "cia cia",
    "bu bu",
    "ih ih ih"];

    var api;
    var autocomplete_init = false;

    $( ".input_autocomplete" ).autocomplete({
        source: availableTags,
        open: function(){
                            if(!autocomplete_init){
                               $('ul.ui-autocomplete').addClass('scroll-pane');
               api = $('.scroll-pane').jScrollPane().data('jsp');
                               autocomplete_init = true;
                            } else {
               api.reinitialise();
                            }
        }
    });

});
</script>

第一次搜索没问题，但如果我关闭自动完成列表并尝试重新打开相同的研究，jScollPane 不会重新初始化。 我哪里错了？

感谢您的帮助

Answer 1

将此添加到您的代码中。

$( ".input_autocomplete" ).keydown(function(){
    $( this ).autocomplete( "search", $(this).val() );
});