React-instantsearch: Search into the same index with different filters

[iamclaytonray]

Do you want to request a feature or report a bug?
Feature, but possibly a question.

Feature: What is your use case for such a feature?
See below.

Feature: What is your proposed API entry? The new option to add? What is the behavior?
I'm proposing a new way to use the <SearchBox /> component. Basically, when you have two or more of these components in a single view, both will search the same dataset for the same values. I propose adding an API to search for specific data per <SearchBox />. For example, say we are searching an ecommerce catalog. My UI requires that I have 2 separate inputs. I want to be able to search for either the product name or the product price.

<SearchBox data='name' />
<SearchBox data='price' />

This is a very contrived example but the idea is, <SearchBox /> accepts a data prop where you can pass it a key to search for.

What is the version you are using? Always use the latest one before opening a bug issue.
Latest - 5.0.1

[iamclaytonray]

I would imagine this is possible, even in the current API. I'm fairly new to Algolia and I didn't see anything in documentation or in the issues. If there's anything I can do to help you guys more than what I've provided, please let me know. I didn't give a whole lot to go on so will probably have to revise the original issue

[samouss]

Hi, it's something already possible with the current API. You can achieve this behaviour with the Index widget of React InstantSearch. It allows your to target multiple indices. You can wrap your SearchBox & Hits inside an Index component in order to scope those widgets to this index. You can find more details about that in our documentation.

<InstantSearch>
  <Index indexName="firstIndexName">
    <SearchBox />
    <Hits />
  </Index>

  <Index indexName="secondIndexName">
    <SearchBox />
    <Hits />
  </Index>
</InstantSearch>

[iamclaytonray]

Sorry, I've been sick...

So, I may have not been completely clear. I'm looking to search the same index with 2 separate <SearchBox />'s but searching different keys. The example in the docs seems like it's searching 2 completely different indexes/indices.

For example, let's say we are searching on LinkedIn. I want to be able to search both for a user's name and in a different search-box, their location. A very contrived payload may look like:

[
  { "id": "1", "name": "Clayton Ray", "location": "Tampa, FL" },
  { "id": "2", "name": "John Doe", "location": "Las Vegas, NV" },
  { "id": "3", "name": "Jane Doe", "location": "Chattanooga, TN" },
]

In this example, I would be searching the "users" index but one search-box will search the name key and the other will search the location key. Hope that makes more sense.

I've been reading through documentation and haven't found something that hits on this specific thing/use-case. I'll continue reading through and experimenting. Thanks for your help 😄

[Haroenv]

You should be able to use a searchable RefinementList for that @iamclaytonray. If the layout needs to be different you should be able to use connectors.

Can you make a sketch of the preferred layout you want to achieve so we are definitely talking about the same thing?

[iamclaytonray]

Hopefully this code sandbox may help.

Please forgive the really bad styles. I mainly just wanted to separate the two inputs. I'm not using Algolia in that example but the concept would be the same. So, barebones...

You have two inputs. One input is responsible for searching the dataset by the name key and the other input is responsible for searching by the location key. Both inputs are searching the same dataset but different keys within the dataset. I'm looking at RefinementList right now

[iamclaytonray]

I'll update later today. It's 4AM EST so heading off to sleep. I don't completely understand what facets are but I think they are what I am looking for. Thank you both for all of your help!

[samouss]

It will depends a lot on your use case, usually search for facet values are used to search inside a refinement list or a menu. But you can use it for whatever you want. You can find a bit more informations about that in our documentation & API reference.

But if you needs to perform a "classic" search into the same index with different parameters the current API doesn't support it. But at some point we want to support this behaviour. You can still create two instances and apply the parameters on each of them. To restrict the search to some attributes you can use restrictSearchableAttributes. Here is an example that shows how to use it, you can find it on CodeSandbox.

[iamclaytonray]

Thanks for the reply! I'm trying this out now. I'll update you when I have a working version of my app again 😄

[iamclaytonray]

Okay, so, it is working for the most part. Because of the limitations of the API, I'll just have to deal with this (not you guys' fault and I really appreciate all of the help from both of you). As far as adding this as a feature to the current API, is this something you want to do or would you guys like some help? I'm not sure how helpful I can be (how much time I can spend on this) but if I can, I will spend as much time as I have.

[Haroenv]

We definitely are still trying to find a proper way to create a unique identifier for an Index which isn't the index name, since that doesn't allow us to have multiple of the same indices with different parameters. Adding all the parameters probably isn't a good idea, maybe a special prop like an index ID would allow this, but I'm not sure of it yet :)

[iamclaytonray]

I no longer need this feature. I'll leave this open but figured I'd give you guys an update. Realistically, I think I could have just received the results and filtered those results, updating the UI as needed. I haven't tested that theory and I probably won't but in case anyone else runs into the same limitations/issues, I recommend at least trying that!

[samouss]

You can now use the multi-index widget to target multiple times the same index. You have to use the prop indexId to uniquely identify your index. Here is an example of its usage.