Groups

To group search results you can define a groups array with titles and group specific search Search Params.

Live demo at the bottom 👇

const ui = new FindkitUI({
    publicToken: "<TOKEN>",
    groups: [
        {
            title: "Pages",
            previewSize: 3,
            params: {
                // Search Params
                tagQuery: [["html"]],
            },
        },
        {
            title: "PDF-files",
            previewSize: 3,
            params: {
                tagQuery: [["pdf"]],
            },
        },
    ],
});

When a search is made with this configuration it will display results from each group as searches are made. The result amount per group is determined by the previewSize key.

The groups can be dynamically updated using the ui.updateGroups() method and the useGroups() hook to update from Slot Overrides.

caution

The groups option cannot be mixed with the top-level params option because each group contains its own params as seen in the above example Eg. this does not work:

const ui = new FindkitUI({
    publicToken: "<TOKEN>",
    params: {}  // ❌ Broken!!
    groups: [], // ❌ Broken!!
});

Options

api docs

title: string

Title of the group. Displayed within the search results.

params: object

The same as Search Params.

previewSize?: number

How many search results to show when all groups are rendered.

relevancyBoost?: number

Boost (multiply) the results relevancy within the group. Meaningful only when groupOrder is set to relevancy.

id: string

Unique id of the group. Automatically generated if not defined. Can be used to pick a specific group in .updateGroups(), .groups or in the useGroups() hook.

Example

const ui = new FindkitUI({
    publicToken: "<TOKEN>",
    groups: [
        // ...
        { id: "pdf", title: "PDF-files" },
        // ...
    ],
});

ui.updateGroups((...groups) => {
    const pdf = groups.find((g) => g.id === "pdf");
    pdf.params.filter.tags = "pdf";
});

Try it!

Open in a new tab view source code in Github or edit online in JSBin or Codesandbox