We’re going to use jQuery and SharePoint to create an “instant” search/filter of a Content Query WebPart and/or List View. This uses the .find(), :contains(), .val(), .hide(), .show(), :not(), .change(), and .keyup() jQuery codes. You can learn all about those from the jQuery documentation. This is all client-side, and only deals with what shows on the page. I'm not going to deal with any server requests, pagination of lists, etc. That's for later.
Check out the video tutorial below:
You’ll be creating something like this:
Step 1: Load jQuery script in your master page
Because our SharePoint installation is secured, I downloaded the latest jQuery build instead of sourcing it from online. So my script in the master page looks like this:
Step 2: Create a page with a CQWP or a list view
Doesn’t matter which one you create, but just have some content we can filter.
Step 3: The Code
I built a lot of this from scratch using the jQuery documentation, but a big shout-out goes to Kilian Valkhof’s article, which helped me organize a lot of what I had. This first part enables case-insensitive searching. It came from Kilian Valkhof, who apparently sourced it from Mike Merrit’s LiveFilter jQuery Plugin, but I’m not sure. Either way, I didn’t write it :). Note:if you use this expression, it means you need to change every instance of contains (small C) to Contains (capital C).
Now we start our function anytime the search input box is changed. Once it's changed, it sets the value of a variable we have called "txt".
Here we have an IF statement that just checks if there is indeed something in the search box, ELSE everything goes back to normal. If there is something inside the search input box, we are going to do two things. First, we'll find any row that does NOT contain the string, and we'll hide that row. Then we'll find any row that DOES contain that string, and we'll show that row. Finally, we chain a "keyup" function to the change function so that as we type everything is happening all together.
And last but not least, we'll create a simple search input box with a class of "search". My styling is attached, feel free to erase and do your own:
Step 4: Final touches
The final step is to put this code inside a Content Editor WebPart (I know, I know, but this is for the sake of this tutorial, definitely not best practice). You’ll have to change the target it’s searching and replace it based on whether or not you’re using a CQWP or a list view. A few tips:
#WebPartWPQ4 is the ID of the webpart on my page, but it might change depending on how many webparts you have, what kind they are, etc.
tr.ms-itmhover seems to be the correct selector for any row in a list view
For searching in a Content Query WebPart, I use this:
Note that I used parents instead of parent because the latter only searches one level up. CQWP list items are so intricately embedded deep down that you have to find the text inside the link, and then hide the whole list item. Just play around with it, let me know if you need any help.