javascriptalgoliainstantsearch.js

Algolia - Instant Search with multiple searchbox


I have the following HTML (simplified)

<form action="#" method="post">
  <input type="text" class="form-control" name="keyWord" id="keyWord" placeholder="key Word">
  <input type="text" id="town" class="form-control" name="town"  placeholder="town">
  <button id="form_button" type="submit" class=""><i class="icon-search"></i></button>
</form>

I have one indice list with attributes such as title, town, description etc

For the first text input (#keyWork) I'd like the searchable attributes to be "title" and "description" and "town" for the second input (#town)

I don't know how to have 2 searchbox that search inside different attribute and can't find an example anywhere. I tried to create a custom widget but I don't know how to specify the custom attribute instead of rewriting the entire query.

Here some code example of what I have achieved so far

const searchClient = algoliasearch( /* keys */ );
const search = instantsearch({
  indexName: 'my_index_name',
  searchClient: searchClient,
});

const renderCustomTown = (renderOptions, isFirstRendering) => {

  const {
    items,
    currentRefinement,
    refine,
    clearMapRefinement,
    widgetParams,
  } = renderOptions;

  element.addEventListener('input', event => {
    refine(event.target.value)
  }); /* Specify attributes here ? */
}

// Create the custom widget
const searchTown = instantsearch.connectors.connectSearchBox(
  renderCustomTown
);

search.addWidget(
  searchTown({
    element: document.querySelector('#town'),
  })
);

Thank you for your help


Solution

  • A little bit late, I forgot to answer my questions

    What I was trying to archive was not possible with algolia widget, so I used another API metho: https://www.algolia.com/doc/api-reference/api-methods/search/