How to structure presentation of page-wide search [EasySearch]

Hi all!

I am just getting started with EasySearch. While I did not have any trouble getting a simple search working on an index, I am now wondering on how I can best integrate it into my app while offering a good user experience.

To give you an idea of my type of problem, I’ll use the example of a site listing car models below.

I have a listing of cars at mydomain.com/cars. I also show manufacturers at mydomain.com/manufacturer, car builds (3-door, 4-door, SUV, …) at mydomain.com/builds, etc. All of these are using dedicated subscriptions to get their data.

I want to offer my search in the sites navbar, so that users can start a search from anywhere. I am now wondering what the best approach/pattern for this is.

Approach A
My first thought is that I

  • need to recognize an input (event trigger)
  • swap the listing template used in the current view for a search results display (dynamic templating)

The one concern I have with this is that I would then display search content while the URL for the list view is still displayed in the browser.

Approach B
A variant would seem to be to

  • recognize key input
  • redirect to a search results page

Does any of the approaches have any reasons strongly in its favor?

Also, what happens when a user clears the search input? Would I want to make that an event to be recognized (change to input and checking for empty input) and then either clear search results (Approach A) or redirect back to where the user was when he started his search (Approach B).

Does anyone have experiences to share related to this?

TIA
Matt