esphome-docs/_templates/searchbox.html

<script src="/pagefind/pagefind-modular-ui.js"></script>
<div class="pagefind-ui__form" id="search"></div>
<script>


    class El {
        constructor(tagname) {
            this.element = document.createElement(tagname);
        }

        id(s) {
            this.element.id = s;
            return this;
        }

        class(s) {
            this.element.classList.add(s);
            return this;
        }

        attrs(obj) {
            for (const [k,v] of Object.entries(obj)) {
                this.element.setAttribute(k, v);
            }
            return this;
        }

        text(t) {
            this.element.innerText = t;
            return this;
        }

        html(t) {
            this.element.innerHTML = t;
            return this;
        }

        handle(e, f) {
            this.element.addEventListener(e, f);
            return this;
        }

        addTo(el) {
            if (el instanceof El) {
                el.element.appendChild(this.element);
            } else {
                el.appendChild(this.element);
            }
            return this.element;
        }
    }

    window.addEventListener('DOMContentLoaded', (event) => {

        const targetClass = "search-results";
        const docel = document.getElementsByClassName("document");
        if (docel.length === 0)
            return;
        const inpel = document.getElementById("search");
        if (!inpel)
            return;

        var mobileWidth = getComputedStyle(document.body).getPropertyValue("--mobile-width-stop");

        function isMobile() {
            return window.innerWidth <= mobileWidth;
        }

        const target = document.createElement("div");
        target.classList.add(targetClass);
        target.id = targetClass;
        target.style.display = "none";
        docel.item(0).appendChild(target);

        const margin = 20;

        const resultTemplate = (result) => {
            let wrapper = new El("li").class("pagefind-modular-list-result");

            let thumb = new El("div").class("pagefind-modular-list-thumb").addTo(wrapper);
            if (result?.meta?.image) {
                new El("img").class("pagefind-modular-list-image").attrs({
                    src: result.meta.image,
                    alt: result.meta.image_alt || result.meta.title
                }).addTo(thumb);
            }

            let inner = new El("div").class("pagefind-modular-list-inner").addTo(wrapper);
            let title = new El("p").class("pagefind-modular-list-title").addTo(inner);
            new El("a").class("pagefind-modular-list-link").text(result.meta?.title).attrs({
                href: result.meta?.url || result.url
            }).addTo(title);

            let excerpt = new El("p").class("pagefind-modular-list-excerpt").addTo(inner);
            new El("a").class("pagefind-modular-list-link").html(result.excerpt).attrs({
                href: result.meta?.url || result.url
            }).addTo(excerpt);

            return wrapper.element;
        }


        function resizeTarget() {
            const searchPos = inpel.getBoundingClientRect();
            var leftPos;
            var topPos;
            var maxWidth = 650;
            target.style.width = "auto;"
            target.style.height = "fit-content";
            target.style.maxWidth = maxWidth + "px";
            let rightPos = margin;
            if (isMobile()) {
                // position search results left aligned with the search box, and below.
                leftPos = margin / 2;
                topPos = searchPos.bottom + margin / 2;
                rightPos = margin / 2;
            } else {
                // position search results top aligned with the search box, and to its right.
                leftPos = searchPos.right + margin * 2;
                topPos = searchPos.top;
                if (rightPos - leftPos > maxWidth)
                    rightPos = leftPos + maxWidth;
            }
            target.style.right = rightPos + "px";
            target.style.top = topPos + "px";
            target.style.left = leftPos + "px";
            let twidth = window.innerWidth - margin - leftPos;
            if (twidth > maxWidth)
                twidth = maxWidth;
            target.style.width = twidth + "px";
            target.style.maxHeight = (window.innerHeight - margin - topPos) + "px";
        }

        window.addEventListener("resize", (event) => { resizeTarget(); });

        function showTarget() {
            if (target.style.display !== "block") {
                target.style.display = "block";
                document.addEventListener('click', clickCallback);
            }
            resizeTarget();
        }

        function hideTargets() {
            if (target.style.display !== "none") {
                target.style.display = "none";
                document.removeEventListener('click', clickCallback);
            }
        }


        const instance = new PagefindModularUI.Instance({
            showSubResults: true,
            showImages: false,
            ranking: {
                pageLength: 0.0,
                termSaturation: 1.6,
                termFrequency: 0.4,
                termSimilarity: 6.0
            }
        });

        instance.add(new PagefindModularUI.Input({
            containerElement: "#search"
        }));

        instance.add(new PagefindModularUI.ResultList({
            containerElement: "#search-results",
            resultTemplate: resultTemplate
        }));

        const clickCallback = (event) => {
            const path = event.composedPath();
            if (path.includes(target) || path.includes(inpel))
                return;
            hideTargets();
        };
        if (target) {
            instance.on("results", (results) => {
                if (results.results.length) {
                    showTarget();
                } else {
                    hideTargets();
                }
            });
        }
    });
</script>