Structuring a page to use autosuggest - Bloomreach Experience - Headless Digital Experience Platform

Structuring a page to use autosuggest

Configuring search box IDs

You need the IDs for the following HTML components:

  • Search box
  • Search button
  • Clear button

Use these IDs to configure the search box, such as in the following example:

Example search box configuration

<div class="input-append">
    <span id="brm-clear-wrapper">
        <input type="text" placeholder="Search" id="searchinput" autocomplete="off">
        <a href="" id="brm-clear-btn" style="display: none;">X</a>
    <button type="submit" class="btn btn-default" id="search-button">
    <i class="icon-search"></i>

Adding the Autosuggest plugin to the search box

Add the following code snippet to render.js bind the Autosuggest plugin to the search box:

Add the Autosuggest plugin to the search box


This code snippet assumes that a text input with the ID, searchinput, is already rendered in the HTML page. To ensure that the code executes only after the page is rendered, execute the code in either a  $(document).ready()  block or at the bottom of the page. 

Moving from an autosuggestion to a search page

After you finish initializing the Autosuggest plugin,  you can see suggestion when you type something in the text box. The styling of the suggestions depend on the page's CSS styles, and is fully controlled by you.

The Bloomreach Autosuggest feature provides a list of search terms suggested by characters entered by your customer. Clicking one of the Autosuggest options updates the hash part of the browser URL with appropriate search parameters, redirecting your customer to a search page for the selected query. 

For example, a customer clicks the suggestion, dresses on sale, and the following hash is appended to the browser URL:

Example hash change

#brm-search?request_type=search&search_type=keyword&q=dresses on sale&l=dresses on sale

This hash URL is mapped to an AJAX search API call. For more information, see the search API. In particular, see the descriptions for the parameters, request_type, search_type, and q. The parameter, l, is a special parameter that stands for display query. It's not required for a valid Search API call, but it's needed to display searches on redirected pages.


Custom rendering

The Autosuggest plugin automatically renders the autosuggest for you, but you might encounter a situation in which you need to render the box yourself. The responseCallback function is the best source for Autosuggest data such as search queries and URLs.

Example responseCallback

var autosuggestConfig = {
render: false,
responseCallback : newRenderFunction,
function newRenderFunction(content) {
//this function should do all the rendering using content object

Here are some tips to consider if you need to apply custom rendering:

  • Use the full version of br-mob.js for development purposes if br-mob.full.js is hosted at the same endpoint as br-mob.js. 
  • To write a render function for Autosuggest, add responseCallback to your Autosuggest configuration.
  • For reference on how to implement the newRenderFunction parameter,look for the Autosuggest.prototype._suggest function in br-mob.full.js, which is the default render function for Autosuggest.
  • Set render: false in the configuration to ensure that the default render isn't called.

After rendering your own autosuggest box based on the responseCallback data, you need to call the 'executeSearch' function using 'brm_suggest' when your customers click to perform a search. The following example shows how to attach this call to the links in your autosuggest box:

  • 'a.customerAutosuggest' is the selector for the autosuggest links rendered in the autosuggest box once your customer starts typing.

  • '#criteria' is the selector for the search input box.
  • searchData is included in the  responseCallback  as one of the elements of the suggestions array or one of the elements of the narrowedWithin array.

Example executeSearch function

$('a.customerAutosuggest').on('click', function(event) {
  $('#criteria').brm_suggest('executeSearch', searchData);
Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?