Create a SharePoint Contextual Search Box in a Content Editor Web Part

SharePoint provides a couple of ways to search on a web part page. First, the Master Page can include a search box which can be set to search within a specific context such as the entire site collection, the current site, or (if on a list view page) the current list or library. The other way to add a search box is to use the Search Box web part. This can also be set to search within a specific context by adjusting the web part settings.

However, in some cases this may not be a good option. For example one of my recent projects required adding a contextual search box on the home page of a site that would search a specific list within that site. The stakeholders wanted to have more control over the layout, so the search box could not be in a separate web part; it had to be included within some other content on the page. Fortunately this turns out to be fairly easy to do with a little JavaScript.

SharePoint uses a URL query string to deliver search results. For example, to search for the word “test” within the “projects” list on the current site, the URL would look like this:

http://server/site/_layouts/OSSSearchResults.aspx?k=test&cs=This%20List&u=http://server/site/lists/projects

The URL starts with the search results page (OSSSearchResults.aspx for MOSS 2007 and Standard/Enterprise 2010 or SearchResults.aspx for WSS 2003 and Foundation 2010 – update your code accordingly), which is in the “_layouts” virtual directory. The “k” parameter includes the search terms. Next the “cs” parameter specifies the context of the search (“This Site” or “This List”). Finally the “u” parameter specifies the location of the context (the site or list URL).

We can use JavaScript in combination with a text input field and a button to generate a URL query string for searching. First, create the text input field and button:

<input id="searchBox" name="searchBox" type="text" />
<input id="searchButton" name="searchButton" type="button" value="Search" />

Next, create a JavaScript function that will build the query string and navigate to the resulting search page. We also need to create a function to check for when the user presses the Enter key because our text input is not in its own web form (you can’t use <form> tags on SharePoint pages because the entire page is already a form). We’ll use three parameters for the search function:

• type – specifies if the context is a site or a list
• site – specifies the location of the current site
• scope – specifies the location of the site or list that you wish to search

<script type="text/javascript">
	// Search for the terms when the Search button is clicked

	function customSearch(type,site,scope) {

		var searchUrl = site + "/_layouts/OSSSearchResults.aspx?" // Or "/_layouts/SearchResults.aspx?" if WSS 2003 or SP2010 Foundation
		var searchTerm = "&k=" + document.getElementById("searchBox").value;
		var listParams = "&cs=This%20" + type + "&u=" + scope;
		document.location.href = searchUrl + searchTerm + listParams;

	}

	// Initiate the customSearch function when the Enter key is pressed

	function searchKeyPress(e) {
		// look for window.event in case event isn't passed in
		if (window.event) { e = window.event; }
		if (e.keyCode == 13)
		{
			document.getElementById('searchButton').click();
		}
	}
</script>

Finally, add the appropriate functions to the onclick and onkeypress events, including the values for the search function:

<input id="searchBox" onkeypress="searchKeyPress(event);" name="searchBox" type="text" />
<input id="searchButton"  name="searchButton" type="button" value="Search" onclick="customSearch(
 	'List',
	'http://server/site',
	'http://server/site/lists/projects'
);" />

Now put it all together:

<script type="text/javascript">
	// Search for the terms when the Search button is clicked

	function customSearch(type,site,scope) {

		var searchUrl = site + "/_layouts/OSSSearchResults.aspx?"
		var searchTerm = "&k=" + document.getElementById("searchBox").value;
		var listParams = "&cs=This%20" + type + "&u=" + scope;
		document.location.href = searchUrl + searchTerm + listParams;

	}

	// Initiate the customSearch function when the Enter key is pressed

	function searchKeyPress(e) {
		// look for window.event in case event isn't passed in
		if (window.event) { e = window.event; }
		if (e.keyCode == 13)
		{
			document.getElementById('searchButton').click();
		}
	}
</script>

<input id="searchBox" onkeypress="javascript:searchKeyPress(event);" name="searchBox" type="text" />
<input id="searchButton"  name="searchButton" type="button" value="Search" onclick="javascript:customSearch(
 	'List',
	'http://server/site',
	'http://server/site/lists/projects'
);" />

The script can be reused on multiple pages/sites for multiple contexts. The only thing you need to change are the values passed to the function in the onclick event.

<input id="searchBox" onkeypress="searchKeyPress(event);" name="searchBox" type="text" />
<input id="searchButton"  name="searchButton" type="button" value="Search" onclick="customSearch(
 	'[Site or List]',
	'[URL of current site]',
	'[URL of list or site to search]'
);" />

You can substitute your own values to customize the search for your site and/or list. Note that when providing the URLs for the site and scope parameters, don’t include a specific page or view; only include the root path to the site and/or list:

Update: I’ve posted a newer version of this solution that allows for multiple search boxes on the same page. The code is similar, but I highly recommend using the updated solution for better flexibility. View it here: