connectors connectSearchBox

Description

SearchBox connector provides the logic to build a widget that will let the user search for a query.

The connector provides to the rendering: refine() to set the query. The behaviour of this function may be impacted by the queryHook widget parameter.

Usage

const search= instantsearch(/* parameters */);

const makeSearchBox= instantsearch.connectors.connectSearchBox(
  function renderFn(
      renderOpts: SearchBoxRenderingOptions,
      isFirstRendering: boolean) {
    // render the custom SearchBox widget
  }
);

const  customSearchBox = makeSearchBox(instanceOpts: CustomSearchBoxWidgetOptions);
search.addWidget(customSearchBox);

Connector options

SearchBoxRenderingOptions

• querystring

  The query from the last search.

• onHistoryChange(SearchParameters) => undefined

  Registers a callback when the browser history changes.

• refine(string) => undefined

  Sets a new query and searches.

• clear() => undefined

  Remove the query and perform search.

• widgetParamsObject

  All original CustomSearchBoxWidgetOptions forwarded to the renderFn.

• isSearchStalledboolean

  true if the search results takes more than a certain time to come back from Algolia servers. This can be configured on the InstantSearch constructor with the attribute stalledSearchDelay which is 200ms, by default.

CustomSearchBoxWidgetOptions

• queryHook[(string, (string) => undefined) => undefined]
  Default value: undefined

  A function that will be called every time a new value for the query is set. The first parameter is the query and the second is a function to actually trigger the search. The function takes the query as the parameter.

  This queryHook can be used to debounce the number of searches done from the searchBox.

Example

// custom `renderFn` to render the custom SearchBox widget
function renderFn(SearchBoxRenderingOptions, isFirstRendering) {
  if (isFirstRendering) {
    SearchBoxRenderingOptions.widgetParams.containerNode.html('<input type="text" />');
    SearchBoxRenderingOptions.widgetParams.containerNode
      .find('input')
      .on('keyup', function() {
        SearchBoxRenderingOptions.refine($(this).val());
      });
    SearchBoxRenderingOptions.widgetParams.containerNode
      .find('input')
      .val(SearchBoxRenderingOptions.query);
  }
}

// connect `renderFn` to SearchBox logic
var customSearchBox = instantsearch.connectors.connectSearchBox(renderFn);

// mount widget on the page
search.addWidget(
  customSearchBox({
    containerNode: $('#custom-searchbox'),
  })
);

Can't find what you are looking for? Open an issue, we'll get back to you.