SvelteKit Search and Filter Page Example

[karimfromjordan]

This surprisingly came up several times this week on Discord — a page that should fetch, filter and search some data through a <form> and search params in load. My idea was a simple products, words, fruits etc. page which:

• allows you to filter items by type using checkboxes
• has a <input type="search" /> to search for specific items
• when JS is available <input type="search" /> submits the form on:input (debounced)
• checkboxes etc. submit the form on:change
• products/words are stored in an array or Map that acts as a database

[geoffrich]

It doesn't have all the details, but I took some notes on my solution for this: https://geoffrich.net/posts/marvel-filter-state/#heading-automatically-submitting-the-form-with-requestsubmit. It's for a Marvel comics search form that has both text inputs (that I debounce) and checkboxes.

It doesn't take into account the new data-sveltekit-replacestate and data-sveltekit-keepfocus link options, which weren't available when I wrote this, so I had to write a custom submit handler instead.

[karimfromjordan]

Oh~ interesting. Yeah this is pretty much what I had in mind. I recently worked on a dictionary site for a client where I also wrestled with some of the points you mention in the blog post. Thanks for the link. Will probably be a good idea then to put all of this into a working example.