Skip to main content

Step 3.1 - Loading suggestions from a different domain

Rumyana Grigorova
  • Updated

    This page explains how to integrate Fredhopper Suggest Search that is deployed at machine in different domain then the one the frontend is setup.

    Introduction

    Using the approach described in step 3 has the limitation that the JSON response can be delivered only from a server running in the same domain.

    If there is a need to get the JSON response from a server running in different domain then an approach known as JSONP could be used. The idea is to add an additional parameter to the http request named 'callback' with value the name of the JavaScript function which will receive the JSON response (as string) with the suggestions as an argument and will be executed automatically at the end of the http request.

    Implementation

    Using Fredhopper reference implementation

    The usage of Fredhopper reference implementation is the same as described in step 3 with two minor differences:

    • the name of the Javascript class is Fredhopper.JsonpAutocompleter
    • the servlet mapping is by default at "/jscript"
       var autocompleter = new Fredhopper.JsonpAutocompleter('search','searchupdate','http://query.published.live1.suggest.eu1.fredhopperservices.com/<customer-name>/jscript',

    Using plain JavaScript without using Javascript libraries

    /**
 * This is the function that will be called automatically with the JSON result as an argument.
 *
 * @param String jsonResponse - the response returned from Fredhopper Suggest Search service
 */
var searchCallback = function(jsonResponse) {

   var responseAsObject = eval(jsonResponse);

   //
   // use 'responseAsObject' to render the suggestions
   //

   // remove the temporary '<script>' element used to deliver the response
   var jsonpScript = document.getElementById('jsonpScript');
   jsonpScript.parentNode.removeChild(jsonpScript);
}

/**
 * This function can be used to make a JSONP call searching for some term
 *
 * @param String term - the search term for which Fredhopper Suggest Search service will return
 * suggestions
 */
var search = function(term) {

  var jsonpScript = document.createElement('script');
  jsonpScript.id = 'jsonpScript';
  jsonpScript.src = 'http://query.published.live1.suggest.eu1.fredhopperservices.com/<customer-name>/jscript?scope=//catalog01/en_US&callback=searchCallback&search=' + term;
  document.getElementsByTagName('head')[0].appendChild(jsonpScript);
}

    The HTML snippet to use this functionality looks like:

      <input name="suggest" value="" autocomplete="off" onkeyup="search(this.value)" />

    Using JavaScript libraries

    If your application already uses any JavaScript library then the code above can be simplified by using their functionality.

    Related articles

    Comments

    0 comments

    Please sign in to leave a comment.