How to use filters with Component UI to search only a subset of the full index with a specific tag?

[sceee]

Hi,

I want to search only a subset of the whole index, lets say all pages with the blog tag.

In JS, this is possible by doing something like

      const search = await pagefind.search(query, {
        filters: {
          type: "blog",
        },
      });

However, I would like to prefer the Pagefind Component UI. How can I define the filter (type: "blog") with Component UI?

I tried to find it in the docs ( https://pagefind.app/docs/components/searchbox/ ), however I was not successful.
Is there any way to achieve this?

Thanks!

[wellkilo]

The Component UI can do this through its shared instance API; you do not need to render a filter control. Set the filter once on the same instance used by the searchbox.

With the generated script bundle:

<script src="/pagefind/pagefind-component-ui.js" type="module"></script>

<pagefind-searchbox instance="blog"></pagefind-searchbox>

<script type="module">
  await customElements.whenDefined("pagefind-searchbox");

  const manager = window.PagefindComponents.getInstanceManager();
  const instance = manager.getInstance("blog");

  // All later searches from the `blog` searchbox retain this filter.
  instance.triggerFilters({ type: ["blog"] });
</script>

With the npm package, the equivalent is:

import "@pagefind/component-ui";
import "@pagefind/component-ui/css";
import { getInstanceManager } from "@pagefind/component-ui";

const instance = getInstanceManager().getInstance("blog");
instance.triggerFilter("type", ["blog"]);

The important part is that the instance name matches. Components with no instance attribute use default; named components must be controlled through the same named instance.

Current Instance.triggerFilters() stores the selection in searchFilters and re-runs the search. Subsequent triggerSearch(term) calls use those stored filters. The official custom-components documentation shows the same methods.

Also make sure the indexed pages actually declare the filter, for example:

<body data-pagefind-filter="type:blog">

Filter names and values are case-sensitive, so type: blog will not match an indexed Type: Blog.

If you instead meant the legacy new PagefindUI(...) interface, keep the returned object and call the same public method:

const search = new PagefindUI({ element: "#search" });
search.triggerFilters({ type: ["blog"] });

That path is covered by Pagefind's own programmatic-filter integration test.

If this gives you the fixed blog-only search you wanted, please mark it as the accepted answer.

[sceee]

Ah, I see!
Perfect, thank you very much @wellkilo !