Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 560
  • Last Modified:

Edit jquery to show all <li> initially, but show matched

Hi All,

i am using the following jquery to find matching list items:

  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };


  function listFilter(header, list) { // header is any element, list is an unordered list
    // create and add the filter form to the header
    var form = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","type":"text"});
    $(form).append(input).appendTo(header);

    $(input)
      .change( function () {
        var filter = $(this).val();
        if(filter) {
          // this finds all links in a list that contain the input,
          // and hide the ones not containing the input while showing the ones that do
          $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
          $(list).find("a:Contains(" + filter + ")").parent().slideDown();
        } else {
          $(list).find("li").slideDown();
        }
        return false;
      })
    .keyup( function () {
        // fire the above change event after every letter
        $(this).change();
    });
  }


  //ondomready
  $(function () {
    listFilter($("#header"), $("#list"));
  });
}(jQuery));

Open in new window



It searches each letter from all the displaying <li> tags and then displays the matches.

what i want it to do is make the list items hidden then only show the matches once the user has started typing.

here is it in action:

Any advice is appreciated,

richard
0
Richiep86
Asked:
Richiep86
  • 2
  • 2
1 Solution
 
Tom BeckCommented:
(function ($) {
  // custom css expression for a case-insensitive contains()
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };


  function listFilter(header, list) { // header is any element, list is an unordered list
    // create and add the filter form to the header
    var form = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","type":"text"});
    $(form).append(input).appendTo(header);
    
    $(list).find("li").css({'display':'none'});
    $(input)
      .change( function () {
        var filter = $(this).val();
        if(filter.length > 0) {
          // this finds all links in a list that contain the input,
          // and hide the ones not containing the input while showing the ones that do
          $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp().css({'display':'none'});
          $(list).find("a:Contains(" + filter + ")").parent().slideDown().css({'display':'block'});
        } else {
          $(list).find("li").css({'display':'none'});
        }
        return false;
      })
    .keyup( function () {
        // fire the above change event after every letter
        $(this).change();
    });
  }


  //ondomready
  $(function () {
    listFilter($("#header"), $("#list"));
  });
}(jQuery));

Open in new window

0
 
Richiep86Author Commented:
Exactly what i needed - thanks!
0
 
Richiep86Author Commented:
How easy would it be to add a litte message if it didnt find anything?

not too fond of a javascript alert however...

Would i need to include another 'default' li which would only display if no matches were found?

Thanks

Richard
0
 
Tom BeckCommented:
Easy enough.

Add this to css:

    .noMatch {
        color:#999;
        font-style:italic
    }

Add this to the list:

<li class="noMatch">no match found</li>

Code:
(function ($) {
  // custom css expression for a case-insensitive contains()
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };


  function listFilter(header, list) { // header is any element, list is an unordered list
    // create and add the filter form to the header
    var form = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","type":"text"});
    $(form).append(input).appendTo(header);
    
    $(list).find("li").css({'display':'none'});
    $(input)
      .change( function () {
        var filter = $(this).val();
        if(filter.length > 0) {
          // this finds all links in a list that contain the input,
          // and hide the ones not containing the input while showing the ones that do
          $(list).find("li a:not(:Contains(" + filter + "))").parent().slideUp().css({'display':'none'});
          $(list).find("li a:Contains(" + filter + ")").parent().slideDown().css({'display':'block'});
          $('.noMatch').css({'display':'none'});       
          $blocks = $('#list li').filter(function(){return $(this).css('display') == 'block';}).length;
          if($blocks == 0){$('.noMatch').css({'display':'block'});}
        } else {
          $(list).find("li").css({'display':'none'});
        } 
        return false;
      })
    .keyup( function () {
        // fire the above change event after every letter
        $(this).change();
    });
  }


  //ondomready
  $(function () {
    listFilter($("#header"), $("#list"));
  });
}(jQuery));

Open in new window

0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now