How to Customize Sitefinity Search Templates

If you ever tried customizing Sitefinity search templates, you quickly realize there isn’t a way to do it through the search widget. Almost all other widgets have an option to update the template or update the path to a custom layout file. The search widget doesn’t even have an advanced button!

Dude, Where’s the Code?!

The HTML that is rendered by the search widget is not even that great. It outputs a table and 15+ lines of code just to output a search text box. Furthermore, there’s still no way to get to the code which makes it quite irritating when trying to integrate into an existing theme. Overriding the viewmap or search widget would be overkill as well.

Farewell, Search Widget

To get around this, you’ll have to forego using the search widget altogether. Sure, it might seem dramatic, but the search widget doesn’t do much anyway. Instead, replace it with your own HTML and we will wire up the functionality ourselves:

<div id="search-wrapper">
  <input name="search" type="text" placeholder="Search" />
  <input name="search-index" type="hidden" value="general-search" />
  <button>Search</button>
</div>

Notice I am just adding a input text box for the search query, a hidden input with the name of the search index you’ll want to use, and any button to handle the submit. For the functionality itself, we’ll use JavaScript to handle the search request:

$(function() {
    var searchWrapper = $('#search-wrapper');
    var searchInput = searchWrapper.find('input[name="search"]');
    var searchIndex = searchWrapper.find('input[name="search-index"]');
    var searchButton = searchWrapper.find('button');

    searchButton.click(function (e)  {
        e.preventDefault();
        
        var index = searchIndex.val();
        var value = searchInput.val().trim();
        
        if (index && value !== '') {
            window.location = '/search?indexCatalogue='
                + index + '&searchQuery='
                + value + '&wordsMode=0';
        }
    });

    searchInput.keypress(function (e) {
        var key = e.which;
        
        // the enter key code
        if(key == 13) {
            searchButton.click();
            return false;  
        }
    });
});

The code is binding a click event to the search button, which will find the search index to use, trim the search query, and redirect the user to the search page with the querystring parameters. It’s all that’s required for the search results page to work. It will read the querystring parameters accordingly and return the results. The code also listens for the “ENTER” key so when the user presses “ENTER” after filling in their search query, it will launch the search as well.

ENJOY!!

The post How to Customize Sitefinity Search Templates appeared first on Falafel Software Blog.