Use existing HTML form for searchbox instead of DOM rendered one

Dear,

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 ?
Thanks

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 => {
            refine(event.target.value);
        });
    }

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

search.addWidgets([
    customSearchBox({
        container: document.querySelector('#searchbox'),
    })
]);
1 Like