Simple SharePoint Search Box with Radio Buttons

So lets say you want users to be able to selectively search content from 3 (or more) different lists (The lists may or may not be on the same site). Out of the Box there is not an easy way to do this.

• Having the user browse to each list or library and search it specifically
• Use the site wide search which will return results from the whole site.

You could setup search scopes for each list but if you manage a large number of sites this could become a lot of work to maintain.

So the plan is to build one search box with radio buttons that will let you choose what list or scope you want to query.  Here is how I did it. 

The HTML

Here is the basci HTML I used. I have a container div I use for styling, the input box, 3 radio buttons, and a search link.  Things to notice:

• On the container div I have included javascript to call a function named ‘submitSearch’ if the user presses the enter key.  See line 1.
• Instead of a submit button I am using a regular link that calls the same function as above.

<div id="multisearch" onkeydown="javascript:if (event.keyCode == 13) submitSearch();"><input id="search_txt" title="Enter search words" type="text" name="k" maxlength="200" />
<label for="all">
<input id="all" type="radio" name="radiou" value="http://myurl.com/sites/SharePoint" checked="checked" />
All
</label>
<label for="posts">
<input id="posts" type="radio" name="radiou" value="http://myurl.com/sites/SharePoint/Lists/Tasks" />
Tasks
</label>
<label for="disc">
<input id="disc" type="radio" name="radiou" value="http://myurl.com/sites/SharePoint/Lists/Discussion" />
Discussions</label></div>
<a name="" href="#" type="submit" value="go" class="multiSearchButton" alt="Search" onclick="submitSearch();">Search</a>

JavaScript

Because we cannot include an actual form in the page and I did not want to use a page viewer web part for this solution we will use JavaScript to submit the values from the search box.  I am using  jQuery as usual.  To keep it simple the function checks the value of the selected radio button, if it is the url of the current site the search is run using the ‘This Site’ scope. Otherwise the search uses the scope that is defined by the value of the radio button and the ‘This List’ scope.

See the comments in the code for more information.

// include jquery
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">// <![CDATA[

// ]]></script>
<script type="text/javascript" language="JavaScript">// <![CDATA[
function submitSearch()
{
// If the all radio button is selected search everything on the site
if(the_value = <a href="http://myurl.com/sites/SharePoint">http://myurl.com/sites/SharePoint</a>){
//set the search terms to the value ofthe text box
queryVal = $('#search_txt').val();
the_value = $('input[name="radiou"]:checked', '#multisearch').val();
//build the url with the url of the search page, the search terms and search scope and browse to it
window.parent.location='search.aspx?k=' + queryVal + '&u=' + the_value + '&cs=This Site';
}
else {
// get the search terrm from the text box
queryVal = $('#search_txt').val();
// Use the radio button value as the url for the search scope
the_value = $('input[name="radiou"]:checked', '#multisearch2').val();
//build the url with the url of the search page, the search terms and search scope and browse to it
window.parent.location='search.aspx?k=' + queryVal + '&u=' + the_value + '&cs=This List'; } };
// ]]></script>

Using the query string

Like most search engines SharePoint uses the query string to pass the information you want to search for.  A quick look at the search results page tells us what we need to send in order to get the results we need.  The rest is just simple JavaScript. In the code above you can see how I built the query string using the various elements.

All together now

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script type="text/javascript" language="JavaScript">// <![CDATA[
 function submitSearch() { if(the_value = "http://myurl.com/sites/SharePoint"){ queryVal = $('#search_txt').val(); the_value = $('input[name="radiou"]:checked', '#multisearch').val(); window.parent.location='search.aspx?k=' + queryVal + '&u=' + the_value + '&cs=This Site'; } else { queryVal = $('#search_txt').val(); the_value = $('input[name="radiou"]:checked', '#multisearch2').val(); window.parent.location='search.aspx?k=' + queryVal + '&u=' + the_value + '&cs=This List'; } };
// ]]></script></pre>
<div id="multisearch" onkeydown="javascript:if (event.keyCode == 13) submitSearch();"><input id="search_txt" title="Enter search words" type="text" name="k" maxlength="200" />
<label for="all">
<input id="all" type="radio" name="radiou" value="http://myurl.com/sites/SharePoint" checked="checked" />
All
</label>
<label for="posts">
<input id="posts" type="radio" name="radiou" value="http://myurl.com/sites/SharePoint/Lists/Tasks" />
Tasks
</label>
<label for="disc">
<input id="disc" type="radio" name="radiou" value="http://myurl.com/sites/SharePoint/Lists/Discussion" />
Discussions</label></div>
<a name="" href="#" type="submit" value="go" class="multiSearchButton" alt="Search" onclick="submitSearch();">Search</a>

Search Results

In the code above you will notice I am passing the search term to a page called search.aspx. This is a page I created by adding the search web parts. I used my own search results page because I wanted to have control of the look and feel. You could also send the results to a search center site or the out of the box search page (_layouts/OSSSearchResults.aspx), this might be different in 2010.

Useful Resouces

• Getting started with jQuery
• How to create Custom Search and Results page