Faceted Search with Stimulus and Turbo Frames

Premise

In this challenge we continue where we left off at Challenge 15 - Typeahead Search. We will extend its solution to a more elaborate and generic way to filter our book list.

Starting Point

Let’s start with the server side this time. As in Challenge 15, our “database” containing book records is a static json file that we require in the server’s entrypoint.

There, whenever the /results endpoint is hit with a GET request, we parse the query string into search params.

Then, we consecutively filter the books and return them in the results Turbo frame.

In the markup, we attached the faceted-search Stimulus contoller with /results as the base URL:

https://stackblitz.com/edit/stimulus-frames-faceted-search?file=index.html%3AL43

Whenever an input is being made, the controller’s perform action is triggered:

https://stackblitz.com/edit/stimulus-frames-faceted-search?file=index.html%3AL53

Challenge

Implement this perform action to set the src attribute of the frameTarget to include all query parameters from the formTarget:

Here’s what that should look like:

Teaser

Try a little code golf on this. How succinct can you be?