Live filter list (no reload)

A collection list with a search box and category chips that update the address and swap just the results, with no page reload.

refetchdata-refetchlivefiltersearchchipsstatelistcollectionfacets

About this block

The search box and chips write url: keys into the page state; the results region (data-refetch with an id) is fetched again from the server with the new address and replaced in place. Without scripting the region still renders the unfiltered list.

How to customize it

  • The region needs both an id and data-refetch listing the address parameters it follows (q,category). The query read must accept the same names in its in= list.
  • Each chip is data-state-set="url:category:<value>"; data-state-class paints the active one.
  • The All chip is an ordinary link back to the page, which reloads it with no filters.
  • Use list-url-filters instead when a plain link or bookmark must work without scripting.

Browse other blocks

Same library cards — preview live and grab the code from any block.

View full library