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.

Search1

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

Search2

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 it’s children when selected or unselected.

Screen1

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 and get a JSON result set to populate the result div.

Screen2

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

Screen3

Display the results

Screen4

 

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s