Search Modal

Standalone search modal module with built-in locales (de/en).

Usage

import SearchModal from "./dist/search-modal.js";

const searchModal = new SearchModal();
searchModal.init({
  triggerId: "open-search",
  locale: "de",
  debounce: 300,
  pageSize: 4,
  search: async (query) => {
    return [
      {
        title: `Result for "${query}"`,
        description: "Short description",
        link: "https://example.com",
      },
    ];
  },
  prompt: async (query) => {
    return {
      html: `<p>Antwort auf <strong>${query}</strong>.</p>`,
      links: [{ title: "Mehr erfahren", link: "https://example.com" }],
    };
  },
});

Options

• triggerId (string): DOM id of the button that opens the modal.
• search (function): callback that receives a query string and returns a result list.
• prompt (function): callback that receives a query string and returns a prompt response.
• locale (string): de or en. Default is de.
• debounce (false | number):
  • false disables auto search (Enter or click only).
  • number in ms enables auto search after the given delay.
• pageSize (number): results per page.
• title (string): override the modal title.
• placeholder (string): override the input placeholder.

Icons are embedded as data URIs in the CSS, so no separate assets path is needed.

If both search and prompt are set, both buttons are shown and Enter/debounce are disabled.

Search Result Format (JSON)

The search callback must return an array of objects with this shape:

[
  {
    "title": "Result title",
    "description": "Optional description",
    "link": "https://example.com"
  }
]

• title (string, required)
• description (string, optional)
• link (string, optional) - when provided, a link button is shown.

Prompt Result Format (JSON)

The prompt callback must return an object with this shape:

{
  "html": "<p>Antwort als HTML</p>",
  "links": [
    {
      "title": "Mehr erfahren",
      "link": "https://example.com"
    }
  ]
}

• html (string, optional) - rendered as HTML inside the modal.
• links (array, optional) - list of link objects (title, link).

HTML output is sanitized before rendering (scripts, event handlers, and unsafe URLs are stripped).