SharePoint: Building a list-specific search with JavaScript

  • Article

Introduction

Whilst writing an article about the Instant List Filter (hosted on CodePlex) I started wondering if there was an "Out of the Box" search solution that allows users to search within specific lists. It's a discussion that I've frequently seen in the TechNet forums, particularly whenever search scopes are mentioned. Whilst I wasn't able to locate anything via the SharePoint GUI, there is indeed a way that this can be achieved, simply by using JavaScript and the Content Editor Web Part.

Solution Details

The core solution is to embed some JavaScript code within a Content Editor Web Part (CEWP) and to tweak it for your list / library. Within the source code (HTML view for SP2010) the code snippet entered provides the end user with a drop-down box, a textbox, and two buttons. These buttons are a Search button and a Clear button.

The dropdown list provided will contain a hardcoded list of all the column names that you want to make searchable. The intention is that the user selects the column to search by picking it from the drop-down box, enters his search text and then clicks the Search button.

The JavaScript will then redirect the user to the same page, with query string data appended to the URL. The Clear button sets the query string URL back to blank, which in effect clears the search data and ensures that the entire list is back in view.

When search scopes are enabled in SP2010, the option to search the list is automatically included in the list of options. However, search scopes are enabled at the site collection level, meaning that once enabled, all lists within your site collection will get this option. This JavaScript alternative is particularly useful if you want to enable list-level search for specific lists only. It also has the added advantage of allowing results to be displayed in situ instead of redirecting to a search results page. However, rather than jumping straight into the code, let's look a little at how OOB list filtering works as this is the functionality that the script plugs into.

Looking at the query string in greater detail

  • In your SharePoint site create a list that has a high number of columns. The Contacts list works perfectly for this

http://baron72.files.wordpress.com/2014/10/102914_0014_buildingali1.png

  • Next, input a few dummy items. Having a few rows to play with works best. In my example, I've used two football managers from the UK Premier League as well as the national team manager.

http://baron72.files.wordpress.com/2014/10/102914_0014_buildingali2.png

  • Now that you have some test data, apply a filter and wait for the page to reload. The demonstration screenshot below applies a filter to the Last Name column.

http://baron72.files.wordpress.com/2014/10/102914_0014_buildingali3.png

Script Details & how to amend

  • Step One: On the page that you want to apply the search field to, use Site Actions à Edit Page
  • Step Two: Click Add a Web Part
  • Step Three: Add an HTML Form Web Part or a Content Editor Web Part, either will work.

http://baron72.files.wordpress.com/2014/10/102914_0014_buildingali4.png

  • Step Four: Input the code snippet below and make the following changes
    • In the function, RedirectURL add the columns you want to make searchable from left to right using the format "Column2", "Column3" and so on
    • In the same function, locate this text window.location.href = "AllItems.aspx?" and set this to the page you want the search results rendered on. The script has this set to the default view AllItems.aspx. Please note that you MUST keep the question mark in the code.
    • In the Search field you'll see some options that look like this: - <option value="Title">. These fields need to correspond to the internal name NOT the display name of the columns that you want to make searchable. Column internal names are explained very well here.
  • Step Five: Save the file once you've made your amendments and your page should reload looking something like the below, with a basic but list-specific search engine at the top of the page

http://baron72.files.wordpress.com/2014/10/102914_0014_buildingali5.png

 

<script type="text/javascript">
 
    function RedirectUrl() {
        var tb = document.getElementById("tbSearch").value;
        var cs = document.getElementById("sfield").value;
        var url = "";
 
        if (tb != "") {
            if (cs == "Column2" || cs == "Column3" || cs == "Column4" || cs == "Column5") {
                url = "FilterField1=" + cs + "&FilterValue1=" + tb;
                window.location.href = "AllItems.aspx?" + url;
            }
            else {
                url = "FilterName=" + cs + "&FilterMultiValue=*" + tb + "*";
                window.location.href = "AllItems.aspx?" + url;
            }
        }
        else {
            return false;
        }
    }
    function ClearUrl() {
        window.location.href = "AllItems.aspx";
    }
        </script>Search Field: <select id="sfield">
         <option value="Title">Last Name</option>
         <option value="FirstName">First Name</option>
         <option value="Company">Company</option>
         <option value="Email">Email Address</option>         
         </select>   Search text: <input id="tbSearch" type="text"/> 
         <input id="btnSearch" onclick="return RedirectUrl();" type="button" value="Search"/>
         <input id="btnClear" onclick="return ClearUrl();" type="button" value="Clear"/>

Further usage

There are probably some things that you can do to take this further if so desired. Some of the tweaks I've made include: -

  1. Styling the buttons according to branding requirements
  2. Keeping this code in a separate HTML file and linking it within a CEWP
  3. Hiding all but the first selection field to force searching within only one column

       

See Also

↑ Return to Top