|
| 1 | +{{- /* Header search: reference.groupdocs.com's own live search over the combined /search-index.json — |
| 2 | + the SAME engine as the home page (gd-home). Revealed by the header's #search_toggle button. |
| 3 | + Replaces the docs AI/geekdoc header search. Global scope (all products); fetches the bucket-root |
| 4 | + /search-index.json so it works across every per-product build. Result rows reuse the gd-home |
| 5 | + result styles (.gd-home__result*). */ -}} |
| 6 | +<div class="gdoc-search flex align-center" role="search"> |
| 7 | + <svg class="gdoc-search__search-icon"><use xlink:href="/img/groupdocs-stack.svg#search_control"></use></svg> |
| 8 | + <input type="text" id="gd-hdr-q" class="gdoc-search__input" placeholder="Search classes, methods, namespaces…" |
| 9 | + aria-label="Search the API reference" aria-controls="gd-hdr-results" aria-autocomplete="list" |
| 10 | + autocomplete="off" maxlength="64" /> |
| 11 | + <button type="button" id="gd-hdr-close" class="gdoc-search__close-btn" aria-label="Close search"> |
| 12 | + <svg class="gdoc-search__close-icon"><use xlink:href="/img/groupdocs-stack.svg#search_close"></use></svg> |
| 13 | + </button> |
| 14 | +</div> |
| 15 | +<div id="gd-hdr-results" class="gd-hdr-results" role="listbox" hidden></div> |
| 16 | + |
| 17 | +<script> |
| 18 | +/* Header search — reveal toggle + live results over /search-index.json (same engine as the home page). */ |
| 19 | +(function () { |
| 20 | + var wrap = document.querySelector(".gdoc-header__search"); |
| 21 | + var toggle = document.getElementById("search_toggle"); |
| 22 | + var closeB = document.getElementById("gd-hdr-close"); |
| 23 | + var input = document.getElementById("gd-hdr-q"); |
| 24 | + var box = document.getElementById("gd-hdr-results"); |
| 25 | + if (!wrap || !input || !box) return; |
| 26 | + |
| 27 | + function open() { wrap.classList.add("is-open"); setTimeout(function () { input.focus(); }, 0); } |
| 28 | + function shut() { wrap.classList.remove("is-open"); hide(); } |
| 29 | + if (toggle) toggle.addEventListener("click", function (e) { |
| 30 | + e.preventDefault(); wrap.classList.contains("is-open") ? shut() : open(); |
| 31 | + }); |
| 32 | + if (closeB) closeB.addEventListener("click", function (e) { e.preventDefault(); shut(); }); |
| 33 | + document.addEventListener("click", function (e) { |
| 34 | + if (!wrap.classList.contains("is-open")) return; |
| 35 | + if (wrap.contains(e.target) || (toggle && toggle.contains(e.target))) return; |
| 36 | + shut(); |
| 37 | + }); |
| 38 | + |
| 39 | + var index = null, loading = false, items = [], active = -1, MAX = 8; |
| 40 | + function load() { |
| 41 | + if (index || loading) return; |
| 42 | + loading = true; |
| 43 | + fetch("/search-index.json").then(function (r) { return r.json(); }) |
| 44 | + .then(function (d) { index = d; if (input.value.trim()) run(input.value); }) |
| 45 | + .catch(function () { index = []; }); |
| 46 | + } |
| 47 | + function kindOf(e) { |
| 48 | + if (e.u.indexOf("/guides/") !== -1) return ["Guide", "g"]; |
| 49 | + if (!e.p) return ["Product", "pr"]; |
| 50 | + var t = e.t || ""; |
| 51 | + if (t.indexOf(".") !== -1 && t === t.toLowerCase()) return ["Namespace", "ns"]; |
| 52 | + if (/^[A-Z]/.test(t) && t.indexOf(" ") === -1) return ["Type", "ty"]; |
| 53 | + return ["Page", "pg"]; |
| 54 | + } |
| 55 | + function pathOf(e) { return e.u.split("/").filter(Boolean).slice(0, -1).join(" / "); } |
| 56 | + function esc(s) { return s.replace(/[&<>"]/g, function (c) { return ({ "&": "&", "<": "<", ">": ">", '"': """ })[c]; }); } |
| 57 | + function highlight(t, q) { |
| 58 | + var i = t.toLowerCase().indexOf(q.toLowerCase()); |
| 59 | + if (i === -1) return esc(t); |
| 60 | + return esc(t.slice(0, i)) + "<mark>" + esc(t.slice(i, i + q.length)) + "</mark>" + esc(t.slice(i + q.length)); |
| 61 | + } |
| 62 | + function score(e, q) { |
| 63 | + var t = (e.t || "").toLowerCase(); |
| 64 | + if (t === q) return 0; |
| 65 | + if (t.indexOf(q) === 0) return 1; |
| 66 | + if (t.indexOf(q) !== -1) return 2; |
| 67 | + if (e.u.toLowerCase().indexOf(q) !== -1) return 3; |
| 68 | + return 99; |
| 69 | + } |
| 70 | + function run(q) { |
| 71 | + q = q.trim().toLowerCase(); |
| 72 | + if (!q) { hide(); return; } |
| 73 | + if (!index) { load(); return; } |
| 74 | + var hits = []; |
| 75 | + for (var i = 0; i < index.length; i++) { var s = score(index[i], q); if (s < 99) hits.push([s, index[i]]); } |
| 76 | + hits.sort(function (a, b) { return a[0] - b[0] || a[1].t.length - b[1].t.length; }); |
| 77 | + items = hits.slice(0, MAX).map(function (h) { return h[1]; }); |
| 78 | + render(q, hits.length); |
| 79 | + } |
| 80 | + function render(q, total) { |
| 81 | + if (!items.length) { |
| 82 | + box.innerHTML = '<div class="gd-home__noresult">No results for <strong>' + esc(q) + '</strong>.</div>'; |
| 83 | + box.hidden = false; active = -1; return; |
| 84 | + } |
| 85 | + active = 0; |
| 86 | + var html = items.map(function (e, i) { |
| 87 | + var k = kindOf(e); |
| 88 | + return '<a class="gd-home__result' + (i === 0 ? " is-active" : "") + '" role="option" href="' + esc(e.u) + '" data-i="' + i + '">' |
| 89 | + + '<span class="gd-home__rk gd-home__rk--' + k[1] + '">' + k[0] + '</span>' |
| 90 | + + '<span class="gd-home__rmain"><span class="gd-home__rname">' + highlight(e.t, q) + '</span>' |
| 91 | + + '<span class="gd-home__rpath">' + esc(pathOf(e)) + '</span></span>' |
| 92 | + + (e.p ? '<span class="gd-home__rplat">' + esc(e.p) + '</span>' : '') + '</a>'; |
| 93 | + }).join(""); |
| 94 | + if (total > items.length) html += '<div class="gd-home__more">' + total + ' matches — refine your search to narrow it down</div>'; |
| 95 | + box.innerHTML = html; box.hidden = false; |
| 96 | + Array.prototype.forEach.call(box.querySelectorAll(".gd-home__result"), function (el) { |
| 97 | + el.addEventListener("mouseenter", function () { setActive(+el.getAttribute("data-i")); }); |
| 98 | + }); |
| 99 | + } |
| 100 | + function hide() { box.hidden = true; box.innerHTML = ""; active = -1; } |
| 101 | + function setActive(i) { |
| 102 | + var rows = box.querySelectorAll(".gd-home__result"); |
| 103 | + if (!rows.length) return; |
| 104 | + active = (i + rows.length) % rows.length; |
| 105 | + Array.prototype.forEach.call(rows, function (el, j) { el.classList.toggle("is-active", j === active); }); |
| 106 | + rows[active].scrollIntoView({ block: "nearest" }); |
| 107 | + } |
| 108 | + function gotoActive() { |
| 109 | + var rows = box.querySelectorAll(".gd-home__result"); |
| 110 | + if (rows.length && active >= 0) { window.location.href = rows[active].getAttribute("href"); } |
| 111 | + } |
| 112 | + input.addEventListener("focus", load); |
| 113 | + input.addEventListener("input", function () { run(input.value); }); |
| 114 | + input.addEventListener("keydown", function (e) { |
| 115 | + if (e.key === "Escape") { if (input.value) { input.value = ""; hide(); } else { shut(); } return; } |
| 116 | + if (box.hidden) return; |
| 117 | + if (e.key === "ArrowDown") { e.preventDefault(); setActive(active + 1); } |
| 118 | + else if (e.key === "ArrowUp") { e.preventDefault(); setActive(active - 1); } |
| 119 | + else if (e.key === "Enter") { e.preventDefault(); gotoActive(); } |
| 120 | + }); |
| 121 | +})(); |
| 122 | +</script> |
0 commit comments