0

私は小さなスクロールバープラグインとこ​​の例の実装を使用しています。すべてがうまく機能していますが、私は今問題に遭遇しました。

#filteredlistulは固定の高さです。フィルタなしでスクロールすると問題ありませんが、フィルタを使用すると、スクロールバーは同じサイズのままになり、空白スペースをスクロールできます。

  • リストをフィルタリングしたら、スクロールバーのサイズを変更したいと思います。

  • また、元のカウントがフィルタリングされたカウントではなく4未満の場合、テキスト入力#filterを非表示にできるようにしたい

    $(document).ready(function() { 
   $('#scrollbar').tinyscrollbar({size: 'auto', sizethumb: 'auto' });

        $("#filter").keyup(function(){

            // Retrieve the input field text and reset the count to zero
            var filter = $(this).val(), count = 0;
            // Loop through the comment list
            $(".filteredlist li").each(function(){
                // If the list item does not contain the text phrase fade it out
                if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                    $(this).fadeOut();
                // Show the list item if the phrase matches and increase the count by 1
                } else {
                    $(this).show();
                    count++;
                }
            });
         });        
        });


    <form id="live-search" action="" class="styledsearch" method="post">
    <input type="text" class="text-input" id="filter" value="" />
    </form>

          <ul class="filteredlist">
          <li>Dynamic list 1</li>
          <li>Dynamic list 2</li>
          <li>Dynamic list 3</li>
          <li>Dynamic list 4</li>
          <li>Dynamic list 5</li>
          </ul>

ヘルプガイダンスは素晴らしいでしょう。前もって感謝します。

4

1 に答える 1

1

あなたは電話する必要があります

  $('#scrollbar').tinyscrollbar({size: 'auto', sizethumb: 'auto' });

リストを更新したときにもう一度。

何かのようなもの：

    $("#filter").keyup(function(){

        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(), count = 0;
        // Loop through the comment list
        $(".filteredlist li").each(function(){
            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();
            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
                count++;
            }
        });
        $('#scrollbar').tinyscrollbar({size: 'auto', sizethumb: 'auto' });
     });

編集：

私があなたの追加の質問を理解したかどうかはわかりませんが、これはあなたが意味したことですか？

if ($("ul.filteredlist li").size() < 4 ){ 
  $("#filter").hide();
} else {
  $("#filter").show();
}

onReadyで実行できます。http://jsfiddle.net/LSSTB/1/

于 2012-07-25T08:43:51.543 に答える