Assuming you already have the search box setup as described in Part one of this post all you will need to do is change the javascript and add some code to the page.

Setup

• Do everything from the first post
• Add a link to jQuery somewhere on the page.
• Create a custom list called ‘Suggestions’. It just needs to have the default title field. Create at least one item in the list and in the title enter several comma separated words.
• Add the code below to the page.

<script type="text/javascript” src=“http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js”></script>
<script type="text/javascript">
function GetItemsFromSP() {
    var soapEnv =
 “<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                <soapenv:Body> \
                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>Suggestions</listName> \
                        <viewFields> \
                            <ViewFields> \
                               <FieldRef Name='Title' /> \
                           </ViewFields> \
                        </viewFields> \
                    </GetListItems> \
                </soapenv:Body> \
            </soapenv:Envelope>”;
       $.ajax({
        url: “_vti_bin/lists.asmx”,
        type: “POST”,
        dataType: “xml”,
        data: soapEnv,
        complete: processResult,
        contentType: “text/xml; charset=\”utf-8\”“,
        async: false
    });
}
function processResult(xData, status) {
    $(xData.responseXML).find(“z\\:row”).each(function() {
        $(“#data”).append(“” + $(this).attr(“ows_Title”) + “,”);
    });
}
</script>
<script type=“text/javascript” src=“Resources/searchfield.js”></script>
<div style=“display:none; visibility:hidden” id=“data”></div>

The code above get the items from the Suggestions list, seperates them with commas and puts them in a hidden div with an ID of data. Now we just need to edit the searchfield script to read in the information from our hidden div. To do this edit searchfield.js line 26 to call the GetItemsFromSP function and set the suggestionText variable to be equal to the contents of our hidden div. Here is the code.

/**/*/*/*/**/
	GetItemsFromSP();
	var suggestionText =  $(“#data”).html();

Test the page and make sure it works by typing the first few letters of one of the words in you list item.

Conclusion

This is very similar to Jan Tielens’ SharePoint Search-as-You-Type with jQuery solution but I wanted the search box to still be usable even if there are no suggestions. In Jan’s solution the ‘search box’ does not actually do anything when the magnifying glass is clicked. There are likely better ways to do this and if you know of one please post a comment.

Related posts:

1. Adding Suggestions to the Sharepoint search box
2. SharePoint Vertical News Ticker
3. Image Slideshow with captions

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

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.

Related posts:

1. Adding Suggestions to the Sharepoint search box : Part 2
2. Adding references to the page head: the easy way
3. A Better Annoucements Ticker