# Search-ui Scoped search blocks
**URL:** https://discuss.elastic.co/t/search-ui-scoped-search-blocks/279496
**Category:** Elastic Search
**Tags:** elastic-site-search
**Created:** [July 23, 2021, 3:24pm UTC](https://discuss.elastic.co/t/search-ui-scoped-search-blocks/279496 "2021-07-23T15:24:35Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@Gustavo\_Llermaly](https://discuss.elastic.co/u/Gustavo_Llermaly)
#### Post date: [July 23, 2021, 3:24pm UTC](https://discuss.elastic.co/t/search-ui-scoped-search-blocks/279496/1 "2021-07-23T15:24:36Z")
Hello, first a huge thank you for how do you help the community! , I have a question I hope you can help me with.
I need to create the following experience with the search-ui library. I will use "books" to keep it simple.
Books have "categories" and after searching without filters it should show the first 5 results of each category and at the end of each results block a "view more" button.
Then if I press the "view more" button, or I filter by category using facets, then only results related to that category must be displayed.
This categories are fixed and known. My guess is I have to do 1 search per category and render it as different blocks (each category block has its own design) but I have no idea on how to start.
I found this issue: [Share driver between multiple instances of SearchProvider · Issue #409 · elastic/search-ui · GitHub](https://github.com/elastic/search-ui/issues/409) but I'm not sure if its the right path or how to apply it to my problem.
Thanks!
---
### Author:  [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)
#### Post date: [July 23, 2021, 3:35pm UTC](https://discuss.elastic.co/t/search-ui-scoped-search-blocks/279496/2 "2021-07-23T15:35:06Z")
Hey Gustavo,
There's a couple of ways this could go. I think the best way to work through this is if you can put a CodeSandbox together to illustrate. Here is an example to start with: [search-ui-national-parks-example - CodeSandbox](https://codesandbox.io/s/national-parks-example-kdyms).
One thing you could try is using [grouping](https://github.com/elastic/search-ui/blob/master/ADVANCED.md#api-config). I stripped down that sandbox a bit and added in grouping. Here's what that looks like: [search-ui-national-parks-example (forked - grouping) - CodeSandbox](https://codesandbox.io/s/search-ui-national-parks-example-forked-grouping-ipuh9?file=/src/App.js).
Check it out and let me know what you think.
---
### Author:  [@Gustavo\_Llermaly](https://discuss.elastic.co/u/Gustavo_Llermaly)
#### Post date: [July 23, 2021, 4:01pm UTC](https://discuss.elastic.co/t/search-ui-scoped-search-blocks/279496/3 "2021-07-23T16:01:20Z")
Thanks! , I think grouping could do it, but I'm using Site-search and seems like it is not supported or the syntax is different because I'm getting this error:
```auto
group: "'group' is not a valid search option."
```
this is how my connector looks like:
```auto
const connector = new SiteSearchAPIConnector({
engineKey: process.env.REACT_APP_SITE_SEARCH_ENGINE_KEY,
documentType: "page",
beforeSearchCall: (existingSearchOptions, next) =>
next({
...existingSearchOptions,
group: { field: "page_type" },
}),
});
```
does sitesearch support grouping?
---
### Author:  [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)
#### Post date: [July 23, 2021, 5:41pm UTC](https://discuss.elastic.co/t/search-ui-scoped-search-blocks/279496/4 "2021-07-23T17:41:03Z")
You are correct, site search does _not_ support grouping. 😭. You're going to need to make a bunch of different queries.
---
### Author:  [@Gustavo\_Llermaly](https://discuss.elastic.co/u/Gustavo_Llermaly)
#### Post date: [July 23, 2021, 5:45pm UTC](https://discuss.elastic.co/t/search-ui-scoped-search-blocks/279496/5 "2021-07-23T17:45:28Z")
Can you give me a hand?
The logic should be :
if "all" records facet or no filter is selected then show grouped results for each category
if any category filter is selected then run a regular search
what I think is I should have a general search provider to handle the general facets and search bar, and inside 5 more providers with searchQuery filters set
then show the parent provider if filter selected, and show all the children providers if no filter selected
is that accurate? , any guidance would be appreciated 🙂 thanks again for your time
---
### Author:  [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)
#### Post date: [July 23, 2021, 5:55pm UTC](https://discuss.elastic.co/t/search-ui-scoped-search-blocks/279496/6 "2021-07-23T17:55:49Z")
I think you have the general idea. See if you can fork that codesandbox I posted and get something working. I will circle back around to give you a hand with it as soon as I can.
---
### Author:  [@Gustavo\_Llermaly](https://discuss.elastic.co/u/Gustavo_Llermaly)
#### Post date: [July 24, 2021, 12:56am UTC](https://discuss.elastic.co/t/search-ui-scoped-search-blocks/279496/7 "2021-07-24T00:56:07Z")
Hello Jason, I tried many things and this is the closest I could get:
> **[search-ui-scoped-blocks - CodeSandbox](https://codesandbox.io/s/search-ui-scoped-blocks-94vik?file=%2Fsrc%2FApp.js)**
>
> search-ui-scoped-blocks by llermaly using @elastic/react-search-ui, @elastic/react-search-ui-views, @elastic/search-ui, @elastic/search-ui-app-search-connector, moment, react, react-dom, react-scripts
the first load looks good, but then the results doesnt update on setSearchTerm event
The other thing I need to achieve is to keep the facets fixed when filtering a category, and only updating it when the search term changes
I tried many trackUrlState true/false combinations without sucess. This page can be called from a global search form so I guess I need this setting in true
Appreciate your help
---
### Author:  [@Gustavo\_Llermaly](https://discuss.elastic.co/u/Gustavo_Llermaly)
#### Post date: [July 25, 2021, 9:18am UTC](https://discuss.elastic.co/t/search-ui-scoped-search-blocks/279496/8 "2021-07-25T09:18:17Z")
I ended up doing the following :
Create a top level regular state variable "q"
Pass "setQ" to searchbox onsubmit to set it on each search
Pass "q" to all nested searchproviders to setSearchTerm(q)
Add a useEffect to the nested components on "q" updates
Disable trackurl on nested search providers
I'm not sure if this is the best way to do it but works smoothly
I need facets **remaining fixed** on filtering (site-search doesnt support disjunctive ☹ ) is there a way to do without creating a whole new component? and if thats the only way then whats the approach?
@JasonStoltz could you give me your thoughts ?
Updated sanbox: [search-ui-scoped-blocks - CodeSandbox](https://codesandbox.io/s/search-ui-scoped-blocks-94vik)
Thanks
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [August 22, 2021, 9:19am UTC](https://discuss.elastic.co/t/search-ui-scoped-search-blocks/279496/9 "2021-08-22T09:19:07Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.