Video: Create a jQuery instant filter with SharePoint lists

17 May
2012

I’ve just recorded a screencast version of my post about how to create a jQuery instant filter for SharePoint 2010 lists. Enjoy! (The code featured in the video is pasted below)

http://youtu.be/ewoiJFJH9ig

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

$(document).ready(function(){

	var webPartID = $("#WebPartWPQ2");

	$(webPartID).prepend('<div style="padding: 2px; border: 1px solid rgb(204, 204, 204); margin: 5px auto 0pt; background: #ccc; display: block;"><h3 style="text-align: center;margin:2px;">Instant search: <input type="text" class="search" style="padding: 5px;"/></h3></div>');

		$("input.search").change(function() {
			var txt = $("input.search").val();
			if (txt) {
				$(webPartID).find("td:not(:Contains("+txt+"))").parent("tr.ms-itmhover").hide();
				$(webPartID).find("td:Contains("+txt+")").parent("tr.ms-itmhover").show();
			} else {
				$(webPartID).find("td").parent("tr.ms-itmhover").show();
			}
		}).keyup(function(){$(this).change();
	})
});

About bentedder

Ben Tedder is a front-end web developer. He loves WordPress, SharePoint, and Drupal, along with jQuery, CSS, and good 'ol HTML. +Ben Tedder on Google or follow @bentedder

Comments

I try to respond personally, but things get busy sometimes :)
  1. Johan says:
    Jul 9, 2012 at 6:16 pm

    Thank you, very nice example!

    Reply
  2. Ramiya Dixit says:
    Jul 31, 2012 at 9:38 pm

    if i want to apply the search filter for the list in a particular page.
    Can i add the .js file and .jquery file links in the CEWP?

    I tried its not working.

    Reply
  3. Bashkim says:
    Sep 13, 2012 at 6:06 am

    I liked it and found it very usefull,well done, and also my compliments on the way you presented you work in the screencast- very comprehensive.

    B

    Reply
  4. Brian says:
    Sep 28, 2012 at 4:18 am

    Can I implement this jquery filter using the CEWP? My client will not allow me to use SP Designer, but has requested this functionality. Any help you can provide would be greatly appreciated.

    Thanks,
    Brian

    Reply
    • bentedder says:
      Sep 28, 2012 at 6:14 am

      Definitely. Save this script in a .js file somewhere in a document library (if you don’t have access to SPD), and then reference it in the CEWP in your page. That’s really all you need to do (assuming jQuery is already loaded…otherwise do the same thing). Hope that helps.

      Reply
      • Anonymous says:
        Oct 3, 2012 at 1:52 am

        Thanks. I got the search to display, but when I enter an item nothing happens. I searched for the tr.ms-itemhover class I the source and using IEdeveloper browser tool but found nothing. Is there another class that you would recommend?

        Thanks,
        Brian

        Reply

Trackbacks

  1. Create a SharePoint + jQuery instant search filter says:
    May 22, 2012 at 4:53 pm

    [...] Create a jQuery + SharePoint instant search/filter Jan 18, 2012 Tweet !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); #update – view the screencast here [...]

    Reply

Join the discussion!