I think we did a pretty nice implementation of site search on a recent project. It made effective use of jQuery, AJAX calls and a flexible service and data layer.
Filtering allows the user to quickly widdle down the number of assets on a site to a more manageable result set. The Filter/Search area can be shown or hidden by the user and allows the user to quickly view documents and assets that are located on the site that fit the user’s criteria. The area is available throughout the site and persists state so the user can quickly view their last result
Above is the view of the filter search when adding criteria and clicking “View Results”
The html is presenting a set of checkboxes grouped by their parent category. The values of each tag is the corresponding GUID that exists in the data layer. The parent category check-box simply checks or unchecks it’s children when selected or unselected.
View Results Click
AJAX Call / Response
Using Firebug we see what we are getting back from the Ajax call. You can see that we passed in 1 tag for the 2nd category and 1 tag for the 3rd category, the user did not enter in a keyword (searchString) and the results we want per page is 8. The results we get back will be a JSON collection. For performance reasons we have paging occur on the serverside so although there are 35 items that match our criteria we only get back 8 (based off of the perPage parameter). Each JSON object contains what we need to show the results – the link, the icon, the name and the snippet (if exists).
Display the results
Our jQuery.getJSON function will iterate through the result set and create a div resultBlock for each item. One little tricky thing you will see above is that our results are actually split across 2 columns so we have a check to see if the current item in the for loop is equal to the perPage / 2 and creating a new column if that is the case.
So we just went over the clientside of the fence for calling and displaying the results, tomorrow I will go over how this was handled on the serverside using C# and Sitecore as our datalayer.