How to send search query by using tags in React?

I am using CustomHit which hits prop have tags like boat , car, and vehicle.

I can filter them by using CustomMenu but It changes result within hits prop that I have from sending query .

What I want to do is changing searchState by using tags.

For example when I search boat I get one hit which tags are vehicle and boat,

and when I click vehicle tag I still get one hit, I want car and boat by doing that.

so I changed my CustomMenu by adding searchable parameter, but this doesn’t work for me.

Is there any way that I can send query by tags, using React widgets?

If I understand correctly, you want to be able to select multiple tags at once (disjunctive faceting instead of conjunctive faceting). You can use the RefinementList widget and its connector for that.

Hi francoischalifour,
What I want to do is not selecting multiple tags.
I want to get all Algolia records which have tags #vehicle.

My issue is not getting all records that I want after searching specific word.
I want get car which tags are #car #vehicle, after I search boat which tags are #boat #vehicle.

its okay not getting car by searching boat. but I want to show car when user click #vehicle tag.
When I click vehicle tag I still get only boat by doing that.

Hi @algoliaFan,

Would you mind providing us a snippet or an example code so we can better understand you’re implementation and what you are trying to achieve? Thanks!

Hi @chloe.liban,

Here is my code.

const Menu = ({ items, isFromSearch, refine, createURL }) => (
    <div className={classes.tags}>
    {items && items.map((item) => (
        <Badge key={item.value} overlap='circle' color="primary" max={9999} badgeContent={item.count} anchorOrigin={{
         vertical: 'top',
         horizontal: 'left',
        }}>
        <Chip className={classes.chip} key={item.value} label={item.isRefined ? item.label.replace(/#/,'')
          : item.value.replace(/#/, '')}
          style={{ backgroundColor: item.isRefined ? 'WhiteSmoke' : '' }}
          onClick={event => {
          event.preventDefault()
          refine(item.value);
        }} />
        </Badge>
    ))}
    </div>
);

const CustomMenu = connectMenu(Menu);

refine(item.value) not working as I expected. It only works for result that I have from using searchBox.
I want to get all records which shares same tags by doing that.

Hello @algoliaFan,

Is it possible for you to create an example in codesandbox (you can use this template https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/react-instantsearch as a starting point) and point out what is not working and what is the expected behavior?

It would really help us to see what you are trying to do.

Thank you.

Hi @yannick.croissant

I am making question site that user create contents and add tags like Twitter.
So it is hard for me to use code sandbox to point out my issue because the data in sample different from mine.

But instead I have screenshot of my project.
I hope it helps understand my issue.

After I type camper in searchBox I can get camper which is fine.
But my problem is not getting car when I click car tag, because I only get one tag from camper.

I am not sure Algolia built for situation like this, but I want to get all cars from database by clicking car tag.

Thanks so much for the screenshots @algoliaFan! It helps to explain what you are looking for more: To completely understand, when the query is “camper” and a user selects the “car” UI element, you want to retrieve hits all hits from the data set which the the tag “car” OR match the query “camper”, not just those which match the query “camper” AND have the tag “car”, is that correct?

If so, indeed the way that our out-of-the-box Instant Search widgets work is to continuously refine on top of one another. In other words, once the query “camper” is typed in, this narrows the results set, further refinements will return even more narrowed results sets.

In order to show results from either the query “camper” OR “tags:car”, it will be necessary to make two separate queries and then combine both results sets in the UI.

Hi @maria.schreiber

I want to show result of tag"car" after select car UI element. I don’t want to show result of query “camper”, after doing that. So I don’t need to use two separate queries.

I want to set value in searchBox to “” after clicking UI element.
and when user click history back on browser I want to go back to state of query"camper"

So I replaced refine(item.value)in my customMenu with
window.location.replace(http://localhost:3000/?query=${item.value.replace(/#/,'')}&page=1&configure%5BhitsPerPage%5D=8)

Create Url part which I copied and pasted from Algolia document Rouiting Urls detects change of url and changes searchState by this url.
And use history.push to create history of this url. but this part not working as I expected.
So replace it with history.replace and I get result I want.
But I am not sure this way is legit.

Since you want to reset all filters except car and that a link is semantically correct to navigate to a single filter, this solution makes sense.

Another way to achieve that would be to use custom menus in each hit, but this would be more heavy on your page because you would nest InstantSearch connectors.

Hi @francoischalifour,
Thank you for replying. I decided to use this solution in my project.

Thanks!