SharePoint – Filter a List, using an Input Box

Sometimes you need to filter a SharePoint List for some condensed view of the data.

There are multiple ways of doing this server side or client side.

The easiest way is to use a Jscript and a CEWP.

For testing proposes you can create a new Web Part Page.

image

First add a CEWP and next the List which you want to filter.

 

In the CEWP you add this Jscript. plus the input box and the button :

<p>Search on Name: <input id="textboxFilter" size="30">
<input onclick="FilterList();" value="Search" type="button"></p>
<p><em>Use <span class="ms-rteForeColor-2">*</span>
as wildcard</em></p>

<script language="javascript" type="text/javascript">
function FilterList(){
var url=$(location).attr('href').split("?")[0] + "?";

    var sQuery=$("#textboxFilter").val();
    if(sQuery!=""){
       url=url + "FilterName=Title&amp;FilterMultiValue=" + sQuery
       $(location).attr('href',url);
    }
    else {
       $(location).attr('href',url);
    }
}</script>

This will use the value of the input box and construct a QueryString that will filter the List.

image

The result will look like this.

image

When you save the page you can run some tests.

image

If it works fine you can just add a CEWP to the original List.aspx and add your code there to benefit from all the list features, like workflows and custom menu buttons etc.

Enjoy!

Advertisements

One Response to SharePoint – Filter a List, using an Input Box

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: