[reactjs] how to simply search on search attributes?

Hi,

I’m trying to figure out how to make an autocomplete search on searchable attributes, without display refinementList.

Let say I’ve got an index of cars with searchable attributes brand, model and shape.

{
  "brand": "PEUGEOT",
  "model": "308",
  "shape": "Break",
  "title": "PEUGEOT 308 SW 1.6 BlueHDi 120ch Allure S&S EAT6 Boîte Auto"
}
,
{
  "brand": "RENAULT",
  "model": "Kadjar",
  "shape": "SUV / 4x4",
  "title": "RENAULT Kadjar 1.6 dCi 130ch energy Intens"
}
,
{
  "brand": "ALFA ROMEO",
  "model": "MiTo",
  "shape": "City",
  "title": "ALFA ROMEO MiTo 0.9 Twin Air 105ch Collezione Stop&Start"
}

I want to display a simple <input> and be able to search for terms present on my searchable attributes (brand, model & shape).

So if I enter “A” on Input, the suggestions will be :

ALFA ROMEO
Kadjar
RENAULT
Break

if I enter “U” I want :

RENAULT
SUV / 4x4
PEUGEOT

(order doesn’t matter in my exemple).

I can’t find any example on documentation which fit my need.
I found the searchForFacetValues custom connector (https://community.algolia.com/react-instantsearch/guide/Custom_connectors.html#searchforfacetvaluesprops-searchstate-nextrefinement) but I can’t figure out how to work with it…

Can you provide a simple working “react” example for my problem ?

Thanks a lot for your help,

Hi @joris.mulliez, can you walk us through the almost full UI and user interactions you would like to implement ultimately?

Do you have any live example already maybe not using Algolia, any mockup? Once those suggestions are shown, what would be the user action next?

Hi,

Thanks for your response.

There is two pages for our problem :

  • a search page “full algolia react”
  • a home page with just an autocomplete input which redirect to “search page”

The need is to have a search input on the homepage which search on multiple facets (or searchable attributes) : brand, model & shape.

And on suggestion selection => redirect to the “real search page” pre-filtred by selection.

Is this more comprehensive ?

Thanks for your help,

Hi @joris.mulliez, the simple way in your example would be to build an index with all those specific names and types you want to display in the homepage autocomplete.

Something like:

[{
  "name": "PEUGEOT",
  "type": "brand"
}, {
  "name": "Kadjar",
  "type": "model"
}]

etc… Without any duplication.

Then using react-instantsearch, you build an autocomplete out of it, that will display those names and then you route to another React InstantSearch instance (your full search), where you prefill those filters.

What do you think?

PS: I am proposing you this solution because for now, multi search for facet values inside a single UI is not so easy to implement with InstantSearch, we will work on it.