jQuery UI的自動完成和JScrollPane的

我試圖使用jQuery UI自動完成組件與JScrollPane的定製溢出滾動條jQuery UI的自動完成和JScrollPane的

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：

<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>

the第一次搜索是可以的，但如果關閉自動完成列表並嘗試重新打開相同的研究，則jScollPane不會重新初始化。我哪裏錯了？

感謝您的幫助

來源

2011-10-21 pixlab

請發表您的評論 – JellyBelly

好的，我已經更新了html/css代碼謝謝:) – pixlab

在這裏你可以找到你要找的東西：http://stackoverflow.com/questions/5327892/autocomplete-jquery-ui-plugin-with-custom - 滾動條 – JellyBelly

將此代碼添加到您的代碼中。

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

來源

2013-08-17 16:22:06 astroanu

jQuery UI的自動完成和JScrollPane的

回答

相關問題