Use existing HTML form for searchbox instead of DOM rendered one


we want to integrate the searchbox to an existing form (not loaded from JS).
I didn’t find any details on this in the doc or here.

Could you point us in the right direction ?

1 Like

I’ve found at least one solution using the “Customize the UI” process of the documentation: searchBox | InstantSearch.js | API parameters | API Reference | Algolia Documentation

For those interested, it’s pretty easy:

const renderSearchBox = (renderOptions, isFirstRender) => {
    const { query, refine, clear, isSearchStalled, widgetParams } = renderOptions;

    if (isFirstRender) {
        const input = document.getElementById('#searchInput');

        input.addEventListener('input', event => {

    widgetParams.container.querySelector('#searchInput').value = query;
const customSearchBox = instantsearch.connectors.connectSearchBox(renderSearchBox);

        container: document.querySelector('#searchbox'),
1 Like