The Simplest Question in the World

Hi All,

I may be going mad, but I think I have the simplest question ever asked on this forum. I have a dataset with a facet called category. All I want to ask is how I set up a button so that if you click that button the results panel shows all the elements from some fixed category. So for the category “beans” we have a button that when you click it it shows all the results from the category “beans”. No page refreshes please.

I’m using instantsearch and react.

Thanks so much!

Best,
Greg

This can be done three ways in React InstantSearch:

  1. Controlled mode

By using the searchState (and onSearchStateChange) props on the InstantSearch component, you can manually set the search state you want

  1. Controlled mode with routing

If you follow the routing guide, which also uses controlled mode, you can set the url to be the one of that category

  1. Default refinement

If you have a refinement list on category mounted, you can pass the defaultRefinement prop.

If you don’t have one mounted yet, you can use a virtual component.

These options have different trade-offs, so it depends on your exact situation what will fit best.

Hope that helps!

2 Likes

Hi Haroen,

Thanks so much for the reply!

So you noted that it depends specifically on what I want to do, so perhaps I should explain. What I’d like is a button that when I press it the results panel shows only those results from a particular category (and not refined by anything, all the results in the database that fit that category). So I’d just like to define a function which I can call inside the button which performs the search and updates the results page (I can’t seem to post code here, I get Error 403…any help?). Which function would I call? Or how might I adapt the above 3 approaches to write that function? Or perhaps where would I find an example of the above three approaches solving a similar problem?

Thanks so much!

Best,
Greg

Ah, in that case a custom widget seems to make the most sense actually @Gregory

1 Like

I’m just taking a look now, but it seems wonderful! Thanks so much! And so quick! May flowers desend upon you!

The only question I would ask is: Can this button also be made to clear the current search? So if I have typed in “hello” into the search bar and click “toggle apple” then what I would like to be shown is all apple phones, not all apple phones with the word “hello”. So in that sense I would like to reset everything.

You can probably tell I’m a bit new.

Thanks so much!

Best,
Greg

You can wrap it also in connectSearchBox. Note that in my implementation I made it toggle the apple on and off, it’s obviously simpler if you only want to add apple if not already there (remove the filter code)

The code becomes a little more complex because you’re nesting the connectors, but it’s essentially still the same

1 Like

Thanks so much! Taking a look now.

1 Like

I’m afraid I do have one more question. There is probably something foolish I’ve done. I copied your code in directly into my project, and ensured the imports are the same. Oddly, the app starts up and the screen flickers. I can see the right button! And then it disappears and everything goes white. This might be a common react problem. Any thoughts as to where to look?

Thanks so much!

I should add that this happens even when I replace the entire inner piece of code (in the definition of the custom button) with a “hello world”.

are you creating the component in a loop or inside a component by chance? otherwise try to reproduce your error in a sandbox, and we can help further @Gregory

1 Like

Thanks :slight_smile: I fixed it! (I removed onSearchStateChange={props.onSearchStateChange} from the Instant search definition and it worked).

However, going back to your code sandbox (the second one you posted). It doesn’t seem to do any filtering on apple when I click the button. Am I doing something wrong?

I made a typo in the second example, this is correct now: withered-firefly-7ebor - CodeSandbox

Thanks so much! One last question. If you type something into the search box and then click “toggle apple” it removes the filter. If you click it a second time it actually filters to apple. Why is that? And can it be made it take one click?

You’re right, it’s a limitation of the widget approach if you try to filter twice it doesn’t work as I expected. Search state however does work:

If you want the toggling behaviour as in the previous example, you can pass searchState to the component too

1 Like

Hi Haroen,

Thank you so much for your help. I have one more very minor question, I hope you don’t mind. I was wondering, is there a simple way to reset category (i.e. remove all filters) when the user types something in the search box. So when I type “apple” I want it to search the entire database not restrict to any filter the user has previously set.

I should say that I tried creating a custom searchbox and using connectSearchBox({ currentRefinement, refine}), but I think I’ve done something wrong as even if I call setSearchState inside here (and pass it as a parameter) nothing gets updated.

Thanks so much!

if you use searchState and setSearchState that should happen before refine @Gregory, do you have that live?

Hi Haroen,

Thanks so much. I figured it out, that’s all resolved. There is…weep another problem.

I want to change the style of a searchbox…how?

I’ve tried changing the “.ais-SearchBox” in my css file. I’m using the script that creates a project created by you guys, so your min css file is loaded first in the index.html file.

I’ve tried overload the css, I’ve tried changing just about everything.

All I want is to make it match the width of a box. How do I do this?

Best,
Greg

You probably are looking for the size of the input, not the search box wrapper, so that would be .ais-SearchBox-input SearchBox | React InstantSearch | API parameters | API Reference | Algolia Documentation

Thanks so much, I just tried that.

What I have is

.ais-SearchBox{
display:none;
}

just to see if the search boxes will disappear. Nothing happens. I tried it with “.ais-SearchBox-input” now as well. Also nothing happened. I also tried

.ais-SearchBox-input{
width:100%;
}

nothing happened.

Any ideas as to what it could be?

Thank you for all your help!

Are you sure the css is imported? Did you try setting the body background colour to red or similar?