Papermashup

Subscribe


Tweets


Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

jQuery list filtering

AshleyAshley

Here’s a clever little script that’s certainly useful if you want to give users the functionality to refine search results or filter product results. If you had a list of films with long titles this would be a quick and easy way to filter through the results.

The Code

The code below works by searching the text in the list items on each key press. It then filters the results by sliding out the items that don’t match.



 
(function ($) {
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };
 
  function filterList(header, list) { 
    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) {
 	  
		  $matches = $(list).find('a:Contains(' + filter + ')').parent();
		  $('li', list).not($matches).slideUp();
		  $matches.slideDown();
		    
        } else {
          $(list).find("li").slideDown();
        }
        return false;
      })
    .keyup( function () {
        $(this).change();
    });
  }
 
  $(function () {
    filterList($("#form"), $("#list"));
  });
}(jQuery));
 

The HTML


<div id="wrap">
<div class="product-head"> 
  <h1>Product Search</h1> 
    <div id="form"></div>
    <div class="clear"></div>
</div>
  <ul id="list"> 
		<li><img src="products/apple.png" width="30" height="30" align="absmiddle"/> <a href="#/Apple/">Apple</a></li> 
		<li><img src="products/acorn_squash.png" width="30" height="30" align="absmiddle"/> <a href="#/Squash/">Acorn Squash</a></li> 
		<li><img src="products/broccoli.png" width="30" height="30" align="absmiddle"/> <a href="#/Broccoli/">Broccoli</a></li> 
		<li><img src="products/carrot.png" width="30" height="30" align="absmiddle"/> <a href="#/Carrot/">Carrot</a></li> 
		<li><img src="products/celery.png" width="30" height="30" align="absmiddle"/> <a href="#/Celery/">Celery</a></li> 
		<li><img src="products/lettuce.png" width="30" height="30" align="absmiddle"/> <a href="#/Lettuce/">Lettuce</a></li> 
		<li><img src="products/mushroom.png" width="30" height="30" align="absmiddle"/> <a href="#/Mushroom/">Mushroom</a></li> 
		<li><img src="products/onion.png" width="30" height="30" align="absmiddle"/> <a href="#/Onion/">Onion</a></li> 
		<li><img src="products/potato.png" width="30" height="30" align="absmiddle"/> <a href="#/Potato/">Potato</a></li> 
		<li><img src="products/pumpkin.png" width="30" height="30" align="absmiddle"/> <a href="#/Pumpkin/">Pumpkin</a></li> 
		<li><img src="products/radish.png" width="30" height="30" align="absmiddle"/> <a href="#/Radish/">Radish</a></li> 
	    <li><img src="products/squash.png" width="30" height="30" align="absmiddle"/> <a href="#/Squash/">Squash</a></li> 
    	<li><img src="products/strawberry.png" width="30" height="30" align="absmiddle"/> <a href="#/strawberry/">Strawberry</a></li> 
        <li><img src="products/sugar_snap.png" width="30" height="30" align="absmiddle"/> <a href="#/SugarSnaps/">Sugar Snaps</a></li>
        <li><img src="products/tomato.png" width="30" height="30" align="absmiddle"/> <a href="#/tomato/">Tomato</a></li>         
	</ul> 
</div> 

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 18
  • Enamul Hoq
    Posted on

    Enamul Hoq Enamul Hoq

    Reply Author

    So great post.I hope we learned many thing on it .So thanks a lot for sharing this with us


  • Toshiriux
    Posted on

    Toshiriux Toshiriux

    Reply Author

    I cant to use it for an especific purpouse. I have a big list, divided in alphabetical order… I divide each letter with an so, my question is. Every single ul should have the same class ?


  • Diego
    Posted on

    Diego Diego

    Reply Author

    I would like to Know if I can use this script for comercial things?where’s the license?


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      Hi Diego,

      Yes you can use any script on Papermashup for commercial projects, license is completely open source use it how you see fit!

      Best

      Ashley


  • fre
    Posted on

    fre fre

    Reply Author

    hello,

    is it possible show a kind of reset button after the filtering?


  • Raj
    Posted on

    Raj Raj

    Reply Author

    Hi !!! thise is very nice..


  • Sean Molin
    Posted on

    Sean Molin Sean Molin

    Reply Author

    Anyone know of a way to maybe display a message if no results match?


  • shaikh naim
    Posted on

    shaikh naim shaikh naim

    Reply Author

    Very nice….


  • mike
    Posted on

    mike mike

    Reply Author

    did anyone ever come up with a way for large lists to not take forever to display? running a list of 5000 never completes.


  • vauvanvaatteet
    Posted on

    vauvanvaatteet vauvanvaatteet

    Reply Author

    its so usefull thanks for the script.


  • Leroy
    Posted on

    Leroy Leroy

    Reply Author

    Is there a way to default filter a list upon the page first loading… Ie if I only want to display Apple first? Thanks


  • Brian
    Posted on

    Brian Brian

    Reply Author

    Awesome, thanks for the share !!


  • Arif
    Posted on

    Arif Arif

    Reply Author

    very nice and awesome tricks, thanks!


  • Webrunner
    Posted on

    Webrunner Webrunner

    Reply Author

    Sorry to come back, but just one question : how would you implement the script to filter strings regardless to accents… I mean if I type hotel, I want to display hôtel…


  • Webrunner
    Posted on

    Webrunner Webrunner

    Reply Author

    Awesome simple script, I modified it to filter articles nested in identical divs, the filtering is made on h2 element in each div, works perfect !


  • Brian
    Posted on

    Brian Brian

    Reply Author

    Brill, love it. Just getting started with jQuery myself. I don’t know if I can handle the power. I can do anything! Mhwahah!


  • Elvis
    Posted on

    Elvis Elvis

    Reply Author

    Cool script!

    Is it possible to fire the event only after 2nd or 3rd letter ?

    I tried it on my localhost, but i have a extra large list (around 2000 items) and when I entered first letter my browser froze (tried Chrome and Firefox).


  • InnovativePhp
    Posted on

    InnovativePhp InnovativePhp

    Reply Author

    Very good article.learned a lot of new techniques.