Question

I am using the tiny scrollbar plugin and implementation of this example.
All is working great but I have now come across a problem.

the #filteredlist ul is a fixed height. When you scroll without the filter its fine, but once you use the filter the scrollbar stays the same size and you can scroll blank space.

• I want to resize the scrollbar once I have filtered the list.

• Also I want to be able to hide the text input #filter if the origional count is < 4 not the filtered count

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

Any help guidance would be fantastic.
Thanks in advance.

Answer 1

You have to call

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

again when you updated the list.

Something like:

    $("#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' });
     }); 

EDIT:

Not sure if I understood your additional question, but is this what you meant?

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

You can run it onReady. http://jsfiddle.net/LSSTB/1/