Script-Hooks

There are four different instances where a Javascript can be run before or after the Search results are rendered and the page is loaded.

PRE-INIT
Run custom Javascript before the page loads.

PRE-SEARCH
Run custom Javascript before the Search query is sent to the server.

PRE-RENDER
Run custom Javascript before the Search results load.

POST-RENDER
Run custom Javascript after the Search results load.

Script-Hooks can be used to run Javascript code at various instances before or after the search is loaded.

Here are some applications of this Script-Hooks scripts feature-

1. Increase the number of suggestions (or) drop-down results in the search autocomplete UI
2. Disable search listing pages.
3. Increase the number of search results on a page.
4. Disabling the search results page and more.

Here is an application – Increase the number of search results in search autocomplete.

Here we will take an example of how to increase the number of suggestions in the search drop-down using the PRE-INIT script. By default, there are 5 results in the autocomplete.

1. Go to https://cse.expertrec.com/?platform=cse and create your search engine.
2. Go to Script-Hooks > PRE-INIT and enter the following piece of code.
3. You can replace the number 10 with the number of results you want in the suggestions.

   _er_config.append_to_response.suggestion_size = 10;

4. Now reload your search page and you will be able to see 10 results in the autocomplete.

For more information about running custom scripts along with Expertrec Search, please contact the technical support team here.

Take me to the page

Script Hooks API Reference

pre_init hook

Fires before the ExpertRec search widget initializes. Use this to override default configuration before the widget loads.

window.ci_hooks = window.ci_hooks || {};
window.ci_hooks.pre_init = function(config) {
  // Modify config before widget initializes
  config.placeholder = "Search our store...";
  config.resultsPerPage = 12;
  return config;
};

pre_search hook

Fires before a search query is executed. Use this to modify the query, add filters, or implement custom logic.

window.ci_hooks.pre_search = function(query, options) {
  // Add a default filter
  options.filters = options.filters || {};
  options.filters.in_stock = true;
  // Modify the query
  return { query: query, options: options };
};

pre_render hook

Fires before search results are rendered to the DOM. Use this to transform result data before display.

window.ci_hooks.pre_render = function(results) {
  // Add custom badges to results
  results.forEach(function(item) {
    if (item.price < 10) {
      item.badge = "Budget Pick";
    }
  });
  return results;
};

post_render hook

Fires after search results are rendered to the DOM. Use this for DOM manipulation, event binding, or analytics tracking.

window.ci_hooks.post_render = function(container) {
  // Add click tracking to results
  var items = container.querySelectorAll('.search-result-item');
  items.forEach(function(item) {
    item.addEventListener('click', function() {
      // Track click in your analytics
      analytics.track('search_result_click', {
        productId: item.dataset.id
      });
    });
  });
};

Common Use Cases

• Adding custom analytics tracking (Google Analytics, Mixpanel)
• Modifying search results display (custom badges, labels, formatting)
• Injecting custom UI elements (banners, promotions within results)
• Implementing A/B testing on search behavior
• Adding custom filters based on user context (logged-in status, location)

Performance Best Practices

• Keep hook functions lightweight; avoid heavy DOM operations in pre_render
• Use post_render for DOM manipulation, not pre_render
• Avoid synchronous API calls in hooks; use async patterns if needed
• Test hooks in browser console before deploying to production

Debugging Tips

• Use browser console to verify hooks are registered: console.log(window.ci_hooks)
• Add console.log statements inside hooks during development
• Check for JavaScript errors that might prevent hooks from executing
• Verify hook execution order: pre_init > pre_search > pre_render > post_render