Search-ui Scoped search blocks

Elastic Search
1

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 but I'm not sure if its the right path or how to apply it to my problem.

Thanks!

2

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.

One thing you could try is using grouping. 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.

Check it out and let me know what you think.

3

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:

group: "'group' is not a valid search option."

this is how my connector looks like:

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?

4

You are correct, site search does not support grouping. :sob:. You're going to need to make a bunch of different queries.

5

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 :slight_smile: thanks again for your time

6

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.

7

Hello Jason, I tried many things and this is the closest I could get:

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

8

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 :frowning: ) 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

Thanks

9

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.