search header

<script>
(function () {
    var old = document.querySelector(".search-item .search-input");
    if (!old) return;
    var box = old.closest(".search-item") || old.parentNode;

    var input = document.createElement("input");
    input.type = "text";
    input.className = "blog-search-header-input";
    input.placeholder = old.placeholder || "Search...";
    old.replaceWith(input);

    var overlay = document.createElement("div");
    overlay.className = "blog-search-overlay";
    box.appendChild(overlay);

    function render(q) {
        q = (q || "").toLowerCase().trim();
        if (!q) { overlay.innerHTML = ""; overlay.classList.remove("open"); return; }
        var articles = (window.blogData && window.blogData.articles) || [];
        var hits = articles.filter(function (a) {
            var hay = (a.title + " " + (a.summary || "") + " " + (a.tags || []).join(" ")).toLowerCase();
            return hay.indexOf(q) !== -1;
        });
        if (!hits.length) {
            overlay.innerHTML = '<div class="blog-search-none">No results.</div>';
        } else {
            overlay.innerHTML = hits.slice(0, 8).map(function (a) {
                return '<a class="blog-search-overlay-hit" href="' + a.url + '"><span class="t">' + a.title + '</span>' +
                    (a.summary ? '<span class="s">' + a.summary + '</span>' : '') + '</a>';
            }).join("");
        }
        overlay.classList.add("open");
    }

    var t;
    input.addEventListener("input", function () {
        clearTimeout(t);
        t = setTimeout(function () { render(input.value); }, 150);
    });
    input.addEventListener("focus", function () { if (input.value.trim()) render(input.value); });
    input.addEventListener("blur", function () { setTimeout(function () { overlay.classList.remove("open"); }, 150); });
    input.addEventListener("keydown", function (e) { if (e.key === "Escape") { overlay.classList.remove("open"); } });
    document.addEventListener("click", function (e) {
        if (!box.contains(e.target)) overlay.classList.remove("open");
    });
})();
</script>