esphome-docs/_templates/searchbox.html

<script src="/pagefind/pagefind-modular-ui.js"></script>
<div class="pagefind-ui__form" id="search"></div>
<div class="search-results" id="mobile-search-results"></div>
<script>
    let callbackAdded = null;

    window.addEventListener('DOMContentLoaded', (event) => {
        const std_target = document.getElementById("search-results");
        const mobile_target = document.getElementById("mobile-search-results");
        const inpel = document.getElementById("search");

        function showTarget() {
            var target = std_target;
            if (window.innerWidth <= 875) {
                target = mobile_target;
                std_target.style.display = "none";
            } else {
                mobile_target.style.display = "none";
            }
            target.style.display = "block";
            const rect = target.getBoundingClientRect();
            const height = window.innerHeight;
            target.style.width = "100%";
            target.style.height = "fit-content";
            target.style.maxHeight = (height - rect.top - 10) + "px";
            if (!callbackAdded) {
                callbackAdded = true;
                document.addEventListener('click', clickCallback);
            }
        }

        function hideTargets() {
            std_target.style.display = "none";
            mobile_target.style.display = "none";
            std_target.style.height = "0";
            mobile_target.style.height = "0";
            if (callbackAdded) {
                document.removeEventListener('click', clickCallback);
                callbackAdded = false;
            }
        }


        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"
        }));
        instance.add(new PagefindModularUI.ResultList({
            containerElement: "#mobile-search-results"
        }));

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