Search in a Resusable Header, Display as another Reusable Element

Need help
1

Hi there,

So I have a Header that I have added a Search to.

I would like the results to show as a Group over the current page (rather than go off to a separate results page).

I have already tried …

1 - Set up a reusable element for the search results. But I can’t pass the Search Box input in so can’t do the searches. Unless I save it on the User ? And then Trigger a Custom Event to perform the searches. Except that the Reusable Element needs to be on the Header Reusable Element…so…

2 - Create the Search Box and Results as a Reusable element, and try to collapse the results upwards when hidden. This works, except that the Reusable element stops most of the rest of the page working even when hidden as it “over the top”.

Is a nice to have at the moment, so wonder if this is possible to do in an easier way ? The only way I can get it to work is by have the search on every screen (rather than a resusable element) so that it can trigger the custom event.

Thanks.

2

You should be able to access custom states of the reusable element. Can you try this?

3

Not sure I understand this.

I have two reusable elements but I need to pass a state (the search criteria) from one to another.

I can’t access another reusable element from a different reusable element. How can I access the custom state ?

4

Correct. But you could have one reusable element inside the other no? That way you’d able to access the custom state of the inner one.

5

Ah yes. I tried that. But the search box needs to be visible and the results hidden.

I can hide and collapse the results but it still sits in front of the other page elements stopping me clicking on them. It is like it is transparent but not properly hidden.

6

Can you share a link?

7

Ever figure this out? I’m having the transparent but not properly hidden problem stopping my from doing anything else on the page as well… Help! :slight_smile: