connectors connectSearchBox

Edit this page


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.


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);

Connector options


  • 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.


  • 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.


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

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

// mount widget on the page
    containerNode: $('#custom-searchbox'),

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