When working with large lists, it’s often a good idea to give the user different ways of navigating the content. SharePoint provides a few good ways out of the box; Metadata Navigation and Filtering, Column Filtering and Sorting and search. One additional way of doing it is using a nifty javascript jQuery plug-in called quicksearch. Thanks to @jankristiansen for showing me this trick.
The easiest way to do this is by simply adding the necessary files (jquery.js and jquery.quicksearch.js) to SharePoint, e.g. the Style Library, and then adding a Content Editor Web Part above the list you want to filter and edit the HTML content of the web part to add an input field and a call to the quicksearch method.
As an example, I’ve added a content editor web part with the following HTML:
<p>
Filter the list: <input id="filterTxtField" type="text" tabindex="1"/>
</p>
<script type="text/javascript" src="/Style%20Library/Script/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/Style%20Library/Script/jquery.quicksearch.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('input#filterTxtField').quicksearch('table#onetidDoclibViewTbl0 tbody tr');
});
</script>
As you can see, I add an inputfield, reference the javascript files and finally hook up the inputfield with the quicksearch when the document has loaded. I’m passing
'table#onetidDoclibViewTbl0 tbody tr'
to the quicksearch-function, which obviously reflects the table rows to filter on. onetidDoclibViewTbl0 is SharePoint’s internal id of the list view, and will vary for different lists or if you have several list views on the page.
The quicksearch-method will search in the whole row, i.e. all the columns. Note that since this is just jQuery, the quicksearch will only search in the items displayed, so you need to display all items. If you want to do search in a similiar way without showing everything on the page, you should check out SPServices.
A better way to utilize this is to create a webpart with this code (could be deployed as a sandboxed solution) to be able to reuse this functionality more easily.
Screenshots of a list with a lot of documents:
Screenshot of the library filtering on “Pen”:
Screenshot of the library filtering on “2013”:
Hi,
Thanks for the snippet.
Please could you tell us how to find SharePoint’s internal id of a list view.
Hi John,
You’re welcome.
The easiest way to find the internal id of the list view is to use your browser’s element inspector to investigate the HTML on the page. You’re looking for an element similar to
Your response is cut off, I cannot not find the id. I am using the SharePoint 2010 list view web part. The closest thing I see to an ID is the GUID and that does not work. Thank you!
It’s not working for me 🙁
I got the search to work using your code, but for some reason after it filters my input field disappears from the screen. Any ideas?
Love the description of your site : )
That’s strange – I would investigate using Chrome/Firefox and see what CSS is applied to your input field after filtering.
Looks good, but one question. Does the quicksearch only look for items on the current page? Suppose I have a list of 5000 items at 50 items per page. Will it search the entire list?
Thanks
Kevin
This quicksearch only works for items on the current page. To filter all items, you would have to do something completely different, e.g. using the search API or filter manually using jQuery.
Could you display a paginated view but use the id of the allitems view in the filter code?
The items filtered here would have to be present on the current page.
What if you have 2 list web parts on the same page as the Quick Search? Can you code the Quick Search tool to filter one of the lists but not the other?
Yes you can. It would require you to investigate the HTML of the list view you want to filter, and find the id of the table of the list web part. So you would change the line ‘table#onetidDoclibViewTbl0 tbody tr’ to reflect the id of the table in your list view you want to filter.
I have a SharePoint library with (in time) 100.000 items
They all have a certain meta data field (numbers) I can search for.
Is it possible for me to use an input list of for instance 100 different numbers and either search or have a view that gives me only the items that corresponds to the input list?
Keep in mind that this search is only filtering the items on the current page. Sounds like you need something more powerful, like a “real” search solution.
à pà rt 2-3 formule$ mà rrà nte$ tu tombe$ dà n$ le$ même$ connerie$ qu'on lit pà rtout pour à ttirer le chà là nd, le nà tionà li$me $portif, Federer l'egà l d'à li, un grà nd titre pour Murrà y… C'e$t encore plu$ con quà nd c'e$t etiuette fà u rebelle (de$ole clà vier cà $$e, çà donne un $tyle).
What’s up,I read your blogs named “Easy list filtering in SharePoint with jQuery quicksearch | Developer at War” regularly.Your humoristic style is witty, keep up the good work! And you can look our website about proxy list.
Hello admin, i must say you have hi quality content
here. Your website should go viral. You need initial traffic only.
How to get it? Search for: Mertiso’s tips go viral
$(‘input#filterTxtField’).quicksearch(‘table.ms-listviewtable tr.ms-itmhover’);
Try this one it will work