Question

我正在使用tiny scrollbar plugin和this example的实施。一切都很好但我现在遇到了一个问题。

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

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

此外，我希望能够隐藏文本输入#filter，如果原始计数是＆lt; 4不是过滤后的计数

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

任何帮助指导都会很棒。提前谢谢。

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

Jquery滚动条插件和文本输入过滤器

1 个答案: