Adding Suggestions to the Sharepoint search box

Search Suggestions

I got the idea for this from here: http://cssglobe.com/lab/searchfield/. The idea is that by giving users suggestions of what they should be searching for they can be guided to the most important information. When I am searching for something many times I am unsure what what search terms will give me the best results.

To get started we will need a search box to work with.  The out of the box search box could work but I prefer to use the one mentioned here by Kyle Schaeffer because it gives me a lot more flexibility with the design.   

Adding a Search Box to the page

To get the search box on your page :

  1. Add this register tag at the top of the page layout or masterpage :
    <%@ Register Tagprefix="SPSWC"
    Namespace="Microsoft.SharePoint.Portal.WebControls"
    Assembly="Microsoft.SharePoint.Portal, Version=12.0.0.0,
    Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  2. If needed hide the existing search box (I left mine, and it still works fine).
  3. Put this code where you want the search box to show up:
    <br />
    <div id="searchLayout">
    <SPSWC:SearchBoxEx id="SearchBox" RegisterStyles="false" TextBeforeTextBox="" TextBoxWidth="200" GoImageUrl="" GoImageActiveUrl="" GoImageUrlRTL="" GoImageActiveUrlRTL="" UseSiteDefaults="true" DropDownMode="HideScopeDD" SuppressWebPartChrome="true" runat="server" WebPart="true" __WebPartId="{0043945F-2D2B-4A02-8510-CED13B6F04DF}">
    </div>
    <p> 
  4. Save the page.

Javascript

Ok now comes the integration part.  In the JavaScript code searchfield.js you must insert the ID of the search input field.

var id = "searchfield"

In ASP.NET control IDs change when the page is rendered so the best way to do this is to view the source of the page or use FireBug to get the id.  It will be something long like “ctl00_PlaceHolderMain_searchbox2_SFF4064A0_InputKeywords”

Now save the JS file and test the page.

If it does not work make sure you have referenced your javascript properly.

  • If you are doing this in a page layout the script link should go inside the AdditionalPageHead content place holder.
  • If you are putting this in a masterpage you can either refernece the script in the <head> section or just above the closing </body> tag.
Search Suggestions
Search Suggestions

Watch out

This script includes code that will clear the contents of the search box on the first focus so you don’t need to use the “QueryPromptString” tag on your search box because it wont work.

This is what mine came out looking like with a little CSS code.  Also to get the “Go” image to show up I just set the “GoImageUrl” attribute.

Conclusion

This is a very simple solution and can help enhance the user experience but it is not as integrated with SharePoint as I would like.  Ideally the suggestions would be read in from a list stored somewhere on the site.

davecavins

Dave is a SharePoint developer and graphic designer based in the DC area.

5 thoughts on “Adding Suggestions to the Sharepoint search box

  1. Hi,

    I am trying to add a small custom search box to a page I’m working on. I have added the following code to my asp:


    GO

    This has positioned the search box where I want it and it looks fine, however when I click “Go” nothing happens. I also have a custom small search box on my navigation bar, I’m using the exact same id for this one. Do you think this is the problem? Do I need different ID’s for each search box on the page?

    1. @Karen the code got stripped out of you comment but I think the ID could be causing the problem. When I tried to put two search boxes on the page with the same ID I got this error from SharePoint : “An error occurred during the processing of . The ID ‘searchbox2’ is already used by another control.”

      This is the code I use that is working:

      <div id="searchLayout">
      <SPSWC:SearchBoxEx 
      					id="searchbox2" 
      					RegisterStyles="false" 
      					TextBeforeTextBox="" 
      					TextBoxWidth="150" 
      					GoImageUrl="images/button.gif" 
      					GoImageActiveUrl="" 
      					GoImageUrlRTL="" 
      					GoImageActiveUrlRTL=""  
      					UseSiteDefaults="true" 
      					
      					DropDownMode="HideScopeDD" 
      					SuppressWebPartChrome="true" 
      					runat="server" WebPart="true" 
      					__WebPartId="{0043945F-2D2B-4A02-8510-CED13B6F04DF}"/>
      					
      					</div>
      
      
  2. Hi there…
    1) How do I change searchfield.js to include two separate boxes referencing two separate values…
    2) How do I change searchfield.js to search a database table and column…

    Thank you for any input

Leave a Reply

Your email address will not be published. Required fields are marked *