Easy list filtering in SharePoint with jQuery quicksearch

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:

all

Screenshot of the library filtering on “Pen”:

pen

Screenshot of the library filtering on “2013”:

2013

18 thoughts on “Easy list filtering in SharePoint with jQuery quicksearch”

  1. Hi,

    Thanks for the snippet.

    Please could you tell us how to find SharePoint’s internal id of a list view.

    1. 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

      1. 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!

  2. 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 : )

  3. 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

    1. 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.

  4. 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?

    1. 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.

  5. 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?

    1. 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.

    2. à 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).

  6. 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.

  7. 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

  8. $(‘input#filterTxtField’).quicksearch(‘table.ms-listviewtable tr.ms-itmhover’);

    Try this one it will work

Leave a Reply

Your email address will not be published. Required fields are marked *