No-code adding AJAX to search results paging in SharePoint 2010


When searching in SharePoint 2010 you can use the Search Paging Web Part to switch between pages. By default this will redirect you to the next search results page. Did you know however, that you can easily enhance this experience with AJAX without custom development?

Search Paging – the classic way

We all know this scenario: you search for something…

Searching for ‘mavention’ on a standard SharePoint 2010 Publishing Site

you find some results…

Search results on a standard SharePoint 2010 Publishing Site

and then you find some more results…

Second page of search results on a standard SharePoint 2010 Publishing Site

Every time you move to another page of the search result, SharePoint redirects you to another page, which is convenient, given that you can bookmark the link or send it over to someone else.

04

While this works, what if you’re looking for a more dynamic experience, one that doesn’t require a whole page reload?

Enhancing the search experience with AJAX

Instead of reloading the whole page, every time you switch between search result pages, you could just refresh the search results and the pager. Did you know that you can do this without custom development?

Important: Although the solution presented in this article uses AJAX, it’s from the visual point of view only. Behind the scenes the whole search results page is being retrieved, so there is only little performance gain from implementing this solution.

Let’s start with creating a new search results page:

Empty Publishing Page in SharePoint 2010

Next go to the edit mode and in the Rich Text Editor add the Search Core Results, Search Paging and the Content Editor Web Parts.

Search Core Results, Search Paging and Content Editor Web Parts added to a Publishing Page in SharePoint 2010

Tip: To avoid vertical scrolling, which might look awkward in combination with AJAX, you should limit the number of search results per page so that the Search Paging Web Part is visible at all times.

Additionally, to hide the Content Editor Web Part from the visitors, you can set its Chrome Type to None.

Next edit the HTML source of the Rich Text Editor and surround both search Web Parts with:

<div id="searchResults">...</div>

HTML source of the Rich Text Editor

Then edit the contents of the Content Editor Web Part and in the HTML Source view paste the following code snippet:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
    jQuery(function() {
        jQuery('#SRP a').click(MaventionAjaxedSearch);
    });
    
    var MaventionAjaxedSearch = function() {
        var searchResultsSelector = '#searchResults';
        $a = jQuery(this);
        jQuery.get($a.attr('href'), function(data) {
            var pageHtml = jQuery(data);
            jQuery(searchResultsSelector).html(jQuery(searchResultsSelector, pageHtml));
            jQuery('#SRP a').click(MaventionAjaxedSearch);
        });
        return false;
    }
</script>

Confirm your changes and publish the search results page.

If you search now, and use the pager to switch to another page of search results, you should see that the URL in the browser’s address bar remains unchanged while the Search Results and Search Paging Web Parts reflect search results for the search results page of your choice.

Arrows pointing to the URL of the page and the highlighted page in the Search Paging Web Part

How it works

In this script we first load jQuery from CDN and ensure it won’t conflict with none of the SharePoint JavaScript – you can skip lines 1 and 3 if you’re using jQuery on your site already. Next we find the Search Paging Web Part on the page and to the page links we attach our AJAX behavior (5). On every click on a page link in the Search Paging Web Part we retrieve the URL of that link (11) and use it to retrieve the contents of the search results page behind that link (11). Once finished we transform the response from the AJAX request into a jQuery HTML object (12) and we inject it in the search results container we have defined on the page earlier (13). Finally we reattach our AJAX behavior to the newly inserted search paging links (14). Right before we finish we cancel the default click behavior to prevent the browser from navigating to the selected search results page (16).

If you have examined the requests and responses made after switching between pages, you might have noticed that the whole search results page is being retrieved from the server. This is required for two reasons. First of all we have no server-side code at our disposal, so we can either get the results from the search results page itself, or use SharePoint Web Services to execute the search query. The second reason, for which we get the search results directly from the search results page, is the fact that the XML returned by SharePoint Search is transformed using XSL which is defined in the Search Core Results Web Part. If we loaded the results from the Web Services we would have to ensure that they are rendered exactly the same as by the original Search Core Results Web Part which might not be trivial.

Summary

When navigating between search result pages in SharePoint 2010, SharePoint uses a regular redirect to load another set of search results. Using nothing more than JavaScript this standard behavior can be changed into a more dynamic one. While this approach leverages AJAX it only does so for the visual part since in the background the complete search results page is being retrieved where the search results piece is extracted from and injected in the page.

Others found also helpful: