SharePoint – Filter a List, using an Input Box

December 8, 2013

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