Search API ajax

This module can ajaxify Seach API pages and views. Ajax made possible by Drupal 7 core's jQuery BBQ (previous YUI3 History library is dropped).

Compatibility

This module is compatible with Search API, Search API ranges (slider), Search API Solr and Search API sorts. Is not tested with Apache Solr Integration module or FacetAPI slider.

To use custom blocks with AJAX, make sure you add block path visibility for:
search_api_ajax/{mysearchpage}/* or it won't show up in the JSON. You must also register the block providing module in a custom hook like:

function mymodule_search_api_ajax_modules_alter(&$modules) {
  $modules[] = 'block';
}

P.S. This module Ajaxifies a /path on your site, e.g. /search or any /mysearchpage. If your /mypage is ajaxified, then you cannot use /mypage/mynode/12 for node URL aliases! Keep the ajax paths separate from all your other URL aliases.

Views support

To make it work with a views search page, make sure to output a fulltext filter, and rename the filter to 'query', so you get search URLs like /mysearchpage?query=[terms]

Installation and configuration

This Ajax module does not understand your theme CSS id's by default. You must implement a custom module hook to let it know about your theme. For example, create and enable a custom mymodule.module containing this code:

/**
 * Implements hook_search_api_ajax_settings().
 */
function mymodule_search_api_ajax_settings() {
  $settings = array(
  
    // required: CSS ID for the main content (search results html)
    'content' => '#content .content',
    
    // required: array of regions with search-related blocks => CSS ID's
    'regions' => array(
      'my_region' => '#my-css-id',
      'sidebar_first' => '#sidebar-first',
      'sidebar_second' => '#sidebar-second',
    ),
    
    // optional: if you want to show a spinner image on AJAX
    'spinner' => drupal_get_path('module', 'search_api_ajax') .'/spinner.gif',
    
    // optional: if you want to scroll-back-to-top on paging search results
    'scrolltarget' => '#main-content',
    'scrollspeed' => 1000,
    
    // optional: fade main content on AJAX (fade=1 for true)
    'fade' => 1,
    'opacity' => 0.3,    
  );
  
  return $settings;
}

Remark: As you can see, you may need to add proper DIV wrappers with unique CSS ID's around your sidebars, block regions and main content. These should not overlap.

Maintained by

Morningtime