Dot Net Mafia

Group site for developer blogs dealing with (usually) Ionic, .NET, SharePoint, Office 365, Mobile Development, and other Microsoft products, as well as some discussion of general programming related concepts.

Kyle Kelin on .Net

Adding Your Own Search Box to Your Master Page

Sometimes clients want to tweak the search box that usually appears at the top of a SharePoint page so much I just throw the whole thing out. The delegate control is used for search and just loads a user control so you can just replace that with your own user control. But today I had to do it using SPD. So here is how I did it with "no code".

  1. Create a new web part page called CustomSearch (though the name doesn't matter). The drop the Search Core Results web part on it.
  2. Now on your custom master page, delete the delegate control and move the PlaceHolderSearchArea control to the bottom of the page inside your hidden div. Don't delete it because many page layouts need that control present.
  3. Next on your custom master page where the PlaceHolderSearchArea control was add a dropdown, textbox, and hyperlink. The dropdown box will be for scopes, the textbox is where the user will enter their search term, and the hyperlink will submit the search. Notice the values on the dropdown are just the part of our search string. Obviously you will need to customize this to match the scopes that your users want.

    <SELECT name="scopes" id="scopes" class="ms-sbscopes">
    <option value="cs=This%20Site&">This Site</option>
    <option value="cs=This%20List&" >Faqs</option>
    <option value="cs=This%20List&" >Reference Docs</option>
    <option value="cs=This%20List&" >Policy Docs</option>
    <option value="cs=This%20List&" >Forms</option>
    <option value="s=All%20Sites">All Sites</option>

    <div class="ms-sbcell" style="display:block;float:left;border:1px gray solid; margin:0 2px 0 2px;"><input type="text" id="searchtext" class="ms-sbplain"/></div>
    <a href="#" mce_href="#" onclick="SearchRedirect()" style="padding:0 2px 0 0"><img src="/_layouts/images/gosearch.gif" mce_src="/_layouts/images/gosearch.gif" alt="search"/></a>

  4. Finally we need to add a javascript function to our master page that will build our url that contains our custom search page and then redirect the page to that url.

    function SearchRedirect(){
    var searchtext =  document.getElementById('searchtext').value;
    var control = document.getElementById('scopes');
    var scope = control.options[control.selectedIndex].value;

    window.location= '/TestSite/pages/CustomSearch.aspx/Results.aspx?k='+searchtext+'&'+scope;


Published Sep 23 2008, 03:04 PM by KyleKelin
Filed under:



Bookmarks for August 15th through August 19th | Peng's Blog said:

Pingback from  Bookmarks for August 15th through August 19th | Peng's Blog

August 19, 2011 2:08 PM

Chris said:


August 16, 2012 6:17 PM

Leave a Comment


About KyleKelin

Kyle Kelin has been implementing software in the Microsoft space for the past 6 years mainly as a consultant. His interests are SharePoint, .NET, JQuery, and Silverlight.
2018 dotnetmafia.
Powered by Community Server (Non-Commercial Edition), by Telligent Systems