Adding a custom Search Input to a SharePoint page

Sometimes you may need to add a search web part to your page, but you then discover that WSS 3.0 and SharePoint Foundation 2010 don’t offer them (only included in MOSS 2007 / SharePoint Server 2010). Or you want to add a small search box somewhere within your page and provide some descriptive text around it ("If you can’t find what you’re looking for, enter your search terms in the following box to search this site:") to make it more user-friendly.

Whenever the standard web parts in SharePoint can’t help you, the following solution might be able to solve your needs. While it doesn’t offer the full functionality of said web parts (naturally), it still offers you a very simple, yet effective way to provide a search box and make it easier for your visitors to find relevant content.

What this solution does it to provide a dropdown with search scopes and an input box for the search terms, and combines the selections of both to submit searches to a predefined destination. Depending on your requirements, you can define which search results page should be used here. For example, this can be MOSS 2007’s or SharePoint Server 2010’s Search Center. Alternatively, or also if you’re using WSS 3.0 / SharePoint Foundation 2010, you can submit it to the default search page. In case you have a customised search page, you could even submit it to that one!

All you need to do to get it to run is to add the following code onto your page at your preferred location, for example inside a Content Editor Web Part

<SCRIPT type="text/javascript">function CustomSearch() {var currentSitePath = makeAbsUrl(L_Menu_BaseUrl);var resultsPage = currentSitePath + "/_layouts/OSSSearchResults.aspx";  // other option: "/SearchCenter/Pages/Results.aspx";var targetURL = resultsPage + "?k=" + document.getElementById('SearchString').value;// search within a site onlyif (document.getElementById('Scope').value =="ThisSite")targetURL += "&cs=This Site&u=" + currentSitePath;// do not search within current site and not everywhere, thus within a provided listelse if (document.getElementById('Scope').value !="All")targetURL += "&cs=This List&u=" + currentSitePath + "/" + document.getElementById('Scope').value;window.location.href = targetURL ;}</SCRIPT><div class="CustomSearch"><table class="ms-sbtable ms-sbtable-ex"><tr class="ms-sbrow"><td class="ms-sbscopes ms-sbcell" colspan="3"><span>I am looking for:</span></td><td class="ms-sbLastcell"/></tr><tr class="ms-sbrow"><td class="ms-sbscopes ms-sbcell"><select name="Scope" id="Scope" ><option value="ThisSite" selected="selected">This Site</option><option value="Documents">Documents</option><option value="My Presentations">Presentations</option><option value="All">Everywhere</option></select></td><td class="ms-sbcell"><input name="SearchString" type="text" class="ms-sbplain" alt="Enter search criteria" onkeypress="if(IsKeyDownSubmit(event)) CustomSearch();" id="SearchString"/></td><td class="ms-sbgo ms-sbcell"><a title="Go Search" href="javascript:CustomSearch()"><img style="border-right-width: 0px;border-top-width: 0px;border-bottom-width: 0px;border-left-width: 0px"onmouseover="this.src="/_layouts/images/gosearch.gif" mce_src="/_layouts/images/gosearch.gif"" title="Go Search" onmouseout="this.src="/_layouts/images/gosearch.gif" mce_src="/_layouts/images/gosearch.gif""alt="Go Search" src="/_layouts/images/gosearch.gif"></a></td><td class="ms-sbLastcell"/></tr></table></div>

If you want to provide the option to search within one or more given lists, you need to update the corresponding dropdown values (in my example above Documents and My Presentations). The value of the OPTION tag has to be the name of the list/library that was used when it was created (when you open it, you can see it as part of the URL), as for the display name you can choose what you prefer.