Filtered Search Sample (Part 1 - clientside)

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".

Search Form

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 its children when selected or unselected.

View Results Click

Our JavaScript will leverage jQuery and iterate through the checkboxes and use the keyword value to build a URL to call through Ajax and get a JSON result set to populate the result div.

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.

Next Up

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.

CodeProject

Permalink | Leave a comment  »