Saved Searches or Thereabout

May 25, 2011 9:56 pm

One common request that come from some clients is the idea of saved searches, and while Freedom does not currently offer such a feature, there is room to add something like it to your website with Javascript. It may not be the most elegant method for accomplishing this – indeed, more sophisticated session storage may be better for some cases – but it proves fun to implement.

For the past couple months, I have been tweaking a project that the American Chamber of Commerce Executives chartered. I like the name we've given it: advanced search. In truth it only adds a better presentation for Freedom's built-in search. It allows users to select multiple modules they want to search, highlights search terms if they appear in the blurb that Freedom returns, and allows a Green user to quickly change which modules appear on the search page.

In the past couple weeks, ACCE came to us asking what we could do about allowing users to use their browser's back and forward buttons during searching; how could we show search results again if a user clicked a "more" link among the results, and then clicked their browser's back button? The easiest solution would be to force links to open in a new window. Instead, I added a sort of "saved" search. You can click this link here for an example. It should bring you to a page that searches for "professional" (minus the quotes) in the Blog, News, Document Manager, and Events modules—it's all right in the URL. It's not the prettiest solution, but it works!

I'll share a couple snippets to explain how it works for anyone interested. Know that for simplicity, this script requires the jQuery library.

Each time a user submits the search form, this code will run.

var checked_boxes = $('.multisearch:checked');
var mods = '';
checked_boxes.each(function (i) {
     /* for the modules, add its internal ID and a comma if it is not the last */
     mods += $(this).val() + ((i === (checked_boxes.length - 1)) ? '' : ',');
});
/* the search terms come as the contents of the search input box */
var hash_append = '|terms:' + $('#search_box_form .searchBoxInput').val()
    + '|mods:' + mods;

For each checked box, these few lines will assemble a string containing the search terms, a pipe character, and then the search modules. Later in the code, I add this to the URL:

/* notice that I define the variable hash_append with an initial pipe; that allows me
 * to easily empty the current document hash with Javascript's built-in split method */
document.location.hash = document.location.hash.split('|')[0] + hash_append;

Finally, with the hash set, these lines will parse the "saved search" when a user visits the page again.

/* The script should only run this code if the hash is not empty
 * and if there are more than two pipe characters. */
if (document.location.hash !== ''
    && document.location.hash.split('|').length > 2) {
    var search_hash = document.location.hash.split('|');
    var search_terms = search_hash[1].substr(6);
    search_terms = decodeURIComponent(search_terms);
   
    /* We only need the modules themselves, so use substr to extract them */
    var search_mods = search_hash[2].substr(5);
    /* Split the list of modules */
    search_mods = search_mods.split(',');
    /* Loop through them and check each checkbox that's in the saved list of modules */
    $.each(search_mods, function(i , v) {
        $('.' + v + '_check input.multisearch').attr('checked','checked');
    });
    /* Change the style on the search input box and note
     * that it has been effectively given focus. Finally,
     * add the saved search terms to the box */
    $('.searchBoxInput').css({
        'color': '#000',
        'font-style': 'normal'
    }).data('clicked_before', true).val(search_terms);

    /* Trigger the submit event so that the search results reappear */
    $('#search_box_form').trigger('submit');
}

I provide this here not as a pre-built solution for everyone to use, but, rather, as a suggestion for those of you who might want to implement this sort of feature on one of your sites. And please note that this "advanced search" still awaits a number of revisions, both mine and the client's. You'll surely notice a few bugs on the page, and I'll fix them as soon as I can get back to it; this page has not yet gone live. But it has been fun to implement.