The SharePoint Hillbilly

Hey! A jQuery & SharePoint blog post that doesn’t involve SPServices! (sorry Marc)

A buddy of mine set up a SharePoint 2010 site for me (http://mrackley.me) so now you guys can take some of my solutions for a test run.  Woo Hoo! Thanks kind friend, who I haven’t named because I don’t want him getting flooded with requests for 2010 sites. 

So, what to blog about? Let’s start off with something simple that can add a quick “ooh” factor for your users. Don’t you like the way dynamic filters work with jQuery? How you can start typing on what you want to filter on and the data filters immediately with no post-backs? Wouldn’t you like to add that same functionality easily to your SharePoint List Views and Data Views?? You wouldn’t? Oh.. sorry.. I really thought you might… hmm.. oh well.. never mind then…

The Solution

So, what we are going to do is add a short jQuery script on our page. This script will read the text in a text box and then filter all the rows in a list view and only show those rows that contain text that’s in the text box. To be more exact the script will:

1. Find the specific table we want to filter (don’t filter on EVERY row on the page, that would hurt performance).
2. Iterate through each row in that table.
3. Strip off the html tags (we don’t want those affecting our search results, and the speed of the string search)
4. Search the remaining text to see if the text in the filter box exists in what’s left
5. Hide/Show rows accordingly

The Limitations

So, this solution does have several limitations you should be aware of.  It’s not a silver bullet (is anything??) but it does make you views a little more usable.  Those limitations include:

• The filter only filters data currently in the view.  If you have paging turned on, the filter will not display anything that would exist on different pages.
• The filter as implemented is case sensitive, you might want to turn it off. However, keep in mind every calculation you perform will impact performance.
• The filter as implemented searches for any matching text on a row. It is NOT just checking one column, if any text on a row matches the text, that row displays. You may like that, you may not. You could make it search specific cells only, but again, this will impact performance.

There could be a million ways to improve on this script, I just wanted to show you something quick and simple (see blog title)

The Script

Now, the following script uses the default classes on the table and the rows when you add a List view from either SharePoint or SPD.  If you tweak the classes on these views to format them, be sure to tweak the script accordingly. So, if you had your jQuery library in the same location as this script, and did not modify any of the default information for you list view, you could conceivably drop this script in a Content Editor Web Part and be ready to go (another reason I like jQuery). Of course, the fewer rows you have on the screen, the faster it will filter. The two demos I set up have 250 rows each.

You can see this script in action for a list view created in SharePoint HERE.

You can see this script in action for a list view created in SharePoint Designer HERE.

<SCRIPT type="text/javascript"src="/Scripts/jquery.min.js"></SCRIPT>

<SCRIPT type=text/javascript>

jQuery(document).ready(function($){
    //attach a function to the keyup event on the filter box
    $('#filterInput').keyup(function() 
    {
        DynamicFilter($('#filterInput').val());
    });
})

//strip off html taqs
function stripHTML (field) {
    return field.replace(/<([^>]+)>/g,'');
}

function DynamicFilter(text)
{
    //find out list view (default class for a listview is "ms-listviewtable"
    $('table [class="ms-listviewtable"]').find('tr').each(function()
        {
            //don't filter out the header row
            if ($(this).attr("class") != "ms-viewheadertr ms-vhltr")
            {
                //get the html for the row and strip off the html tabs
                source = stripHTML($(this).html());
                
                //check to see if the filter text exists in the remaining text
                if (source.indexOf(text) < 0)
                {
                    //hide the row if it doesn't contain the text
                    $(this).hide();
                } else {
                    //otherwise show it
                    $(this).show();
                }
            }
        }
    );
}

</script>

<div id="mainDiv">
    <table>
        <tr>
            <td class='Filter' width='125px'>Search: <input type="Text" id="filterInput" ></td>
        </tr>
    </table>
</div>

Conclusion

So, yeah, nothing spectacular. I’m trying to give you guys some foundation here to build on. Hopefully you can find something useful. If you know of a better way, please tell us all. I’ve said it before and I’ll say it again. I’m not a jQuery developer, I’m a hack… always have been.. always will be.

OH.. and one more thing. If you haven’t already please VOTE for my Mix11 session.. yes, I’ll keep nagging until Feb 4th… this blogging thing has got to have some perks? right?