0

我正在使用这个例子的小滚动条插件和实现。一切都很好，但我现在遇到了一个问题。

#filteredlist ul 是固定高度。当您在没有过滤器的情况下滚动时，它很好，但是一旦您使用过滤器，滚动条保持相同的大小，您可以滚动空白区域。

  • 过滤列表后，我想调整滚动条的大小。

  • 此外，如果原始计数 < 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();
}

您可以在就绪状态下运行它。http://jsfiddle.net/LSSTB/1/

于 2012-07-25T08:43:51.543 回答