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.

5 Responses

Add a Comment

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