Adding Suggestions to the Sharepoint search box : Part 2

In Part 1 of this post we used a simple javascript to display suggestions on a custom search box. After I wrote that post I was thinking it would make more sense to read the suggestions from a list instead of a JavaScript file. This post will explain how to setup the list and edit the JavaScript to read the suggestions from a list. The idea is that an administrator could manage the list and help guide users toward specific information instead of getting numerous un-related results like in those commercials for bing.

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.

Filter Lists by Date Range

On a recent project one of the requirements was that users be able to filter a list by a date range.  To this I tried using two date filter webparts connected to a data view webpart.  A detailed description of how to set this up can be found here.  This solution worked well enough but there was a page refresh after the user entered each date, so the user enters the first date (page refresh) user enters second date (page refresh again) and finally they get the results.  This annoyed me, I wanted to remove the extra page loads so I tried several things and this is what I finally came up with.

Setup

Using a content editor webpart build the form elements needed to collect the dates, two inputs and a search button.  Give each input a unique ID. Here is the code I used.

<script language="JavaScript">
function submitForm()
{
var startDate = document.getElementById('startDate').value;
var endDate = document.getElementById('endDate').value;
window.parent.location="default.aspx?T1=" + startDate + '&T2=' + endDate;
}
</script>
<p><div id="dateDiv" style="display:none;" class="filterBox">
<h4>Date Search</h4>
        Between
<input name="startDate" type="text" id="startDate" value="" size="15" class="dateformat-Y-ds-m-ds-d" value="">
and
<input name="endDate" type="text" id="endDate" value="" size="15" class="dateformat-Y-ds-m-ds-d" value="">
 YYYY-MM-DD
<input type="submit" name="Submit" value="Go"  onClick="submitForm();this.disabled=true;">
</div>

The class names are used to activate the date picker script but can be whatever you want. I used this date picker script from Frequecy Decoder

The submitForm() function simply takes the values from the inputs and adds them as query string variables at the end of the URL. We can now use these values to filter the list.

Filtering the Data View Web part

To filter the content of the DVWP based on the date we have to setup some parameters for the start and end dates.   Under ‘Common Data View Tasks’ just choose ‘Parameters’ for both the start and end date set the source as ‘Query String’. The query string variable will be whatever you defined in the JavaScript so in this case they are T1 and T2. Set the default value for the start date to some date impossibly far in the past and for the end date set it to something like the year 3000. This will ensure that the list will show all records if no values are passed for the start and end dates.

Then all you have to do is setup your filter based on the parameters from the query string.

You’re done.

Things to remember

The date has to be passed in YYYY-MM-DD format in order to work.

If the detault values for your start and end date parameters are not set high / low enough all records will not display when not date range is entered.

Adding Suggestions to the Sharepoint search box

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.    Read the rest of this entry »