Skip to main content
The SearchBox connector provides the logic to build a custom widget that lets users search for a query.

​
Usage

import { connectSearchBox } from 'instantsearch.js/es/connectors';

const customSearchBox = connectSearchBox(
  (renderOptions, isFirstRender) => {
    const { query, refine, clear, widgetParams } = renderOptions;
    const { container } = widgetParams;
    
    container.innerHTML = `
      <input 
        type="search" 
        value="${query}"
        placeholder="Search..."
      />
      <button>Clear</button>
    `;
    
    container.querySelector('input').addEventListener('input', (e) => {
      refine(e.target.value);
    });
    
    container.querySelector('button').addEventListener('click', () => {
      clear();
    });
  }
);

search.addWidgets([
  customSearchBox({
    container: document.querySelector('#search-box'),
  }),
]);

​
Connector Options

​
queryHook
(query: string, search: (value: string) => void) => void
A function called every time a new query is set. The first parameter is the query and the second is a function to trigger the search.This can be used to debounce searches:
queryHook(query, search) {
  clearTimeout(this.timerId);
  this.timerId = setTimeout(() => search(query), 300);
}

​
Render Options

​
query
string
The current search query.
​
refine
(value: string) => void
Sets a new query and triggers a search.
​
clear
() => void
Clears the query and performs a search.
​
isSearchStalled
boolean
true if the search results take more than a certain time to come back from Algolia servers.
This parameter is deprecated. Use instantSearchInstance.status instead.
​
widgetParams
object
The options passed to the connector.

Build docs developers (and LLMs) love

Get started for freeTalk to us