wordpress-theme-aksrt/assets/js/header-inline-search.js

/**
 * Layout-2 navbar search — zibll remote-box + live suggestions.
 * Loads aksrt_menu_search panel (history/hot/posts), then suggests on input.
 */
(function () {
  "use strict";

  var HISTORY_KEY = "aksrt-mobile-search-history";

  function ajaxUrl() {
    return (window.aksrtData && aksrtData.ajaxUrl) || "";
  }
  function nonce() {
    return (window.aksrtData && aksrtData.nonce) || "";
  }

  function readLocalHistory() {
    try {
      var raw = localStorage.getItem(HISTORY_KEY);
      var list = raw ? JSON.parse(raw) : [];
      if (!Array.isArray(list)) return [];
      return list
        .map(function (it) {
          if (typeof it === "string") return it;
          return it && it.keyword ? String(it.keyword) : "";
        })
        .filter(Boolean)
        .slice(0, 10);
    } catch (e) {
      return [];
    }
  }

  function writeLocalHistory(keywords) {
    try {
      var items = (keywords || []).slice(0, 10).map(function (k) {
        return { keyword: k, type: "post" };
      });
      localStorage.setItem(HISTORY_KEY, JSON.stringify(items));
    } catch (e) {}
  }

  function loadRemote(box) {
    if (!box || box.getAttribute("data-loaded") === "1") return;
    var url = box.getAttribute("remote-box") || box.getAttribute("data-url");
    if (!url) return;
    box.setAttribute("data-loaded", "1");
    var sep = url.indexOf("?") >= 0 ? "&" : "?";
    if (nonce()) {
      url = url + sep + "nonce=" + encodeURIComponent(nonce());
    }
    fetch(url, { credentials: "same-origin" })
      .then(function (r) {
        return r.text();
      })
      .then(function (html) {
        if (!html || html === "0") {
          box.innerHTML = "";
          return;
        }
        box.outerHTML = html;
        var form = document.querySelector('form[data-aksrt-search-form="inline"]');
        if (form) enhancePanel(form);
      })
      .catch(function () {
        box.removeAttribute("data-loaded");
      });
  }

  function enhancePanel(form) {
    var group = form.querySelector(".form-group");
    var panel = form.querySelector(".navbar-inline-search-panel");
    var input = form.querySelector(".search-input");
    if (!group || !input) return;

    // Merge guest local history into panel list.
    var histList = form.querySelector(".aksrt-menu-search-history__list");
    if (histList && !(window.aksrtData && aksrtData.isLoggedIn)) {
      var local = readLocalHistory();
      if (local.length) {
        histList.innerHTML = local
          .map(function (kw) {
            return (
              '<a class="but jb-sm" href="' +
              (window.location.origin || "") +
              "/?s=" +
              encodeURIComponent(kw) +
              '">' +
              kw +
              "</a> "
            );
          })
          .join("");
      }
    }

    
    form.querySelectorAll("[data-aksrt-menu-search-type]").forEach(function (chip) {
      chip.addEventListener("click", function (e) {
        e.preventDefault();
        var v = chip.getAttribute("data-aksrt-menu-search-type") || "post";
        var tin = form.querySelector('input[name="aksrt_search_type"]');
        if (tin) tin.value = v;
        form.querySelectorAll("[data-aksrt-menu-search-type]").forEach(function (c) {
          c.classList.toggle("active", c === chip);
        });
      });
    });

var clearBtn = form.querySelector("[data-aksrt-clear-menu-history]");
    if (clearBtn && !clearBtn._bound) {
      clearBtn._bound = 1;
      clearBtn.addEventListener("click", function (e) {
        e.preventDefault();
        writeLocalHistory([]);
        if (histList) {
          histList.innerHTML =
            '<span class="muted-3-color em09" data-empty="1">暂无历史</span>';
        }
      });
    }

    var suggestMount = form.querySelector("[data-aksrt-menu-suggest]");
    var timer = null;
    var searchConfig = (window.aksrtData && aksrtData.search) || {};

    function typeValue() {
      var t = form.querySelector('input[name="aksrt_search_type"]');
      return (t && t.value) || searchConfig.defaultType || "post";
    }

    function requestSuggest(q) {
      if (!suggestMount || !ajaxUrl() || q.length < 2) {
        if (suggestMount) {
          suggestMount.hidden = true;
          suggestMount.innerHTML = "";
        }
        return;
      }
      var xhr = new XMLHttpRequest();
      xhr.open("POST", ajaxUrl(), true);
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
      xhr.onload = function () {
        if (xhr.status < 200 || xhr.status >= 300) return;
        try {
          var json = JSON.parse(xhr.responseText);
          var items = (json.success && json.data && json.data.items) || [];
          if (!items.length) {
            suggestMount.hidden = true;
            suggestMount.innerHTML = "";
            return;
          }
          var html =
            '<div class="muted-2-color em09 mb6">' +
            (searchConfig.suggestTitle || "搜索建议") +
            "</div><div class=\"navbar-inline-search-suggest\">";
          items.forEach(function (it) {
            html +=
              '<a class="navbar-inline-search-suggest__item" href="' +
              (it.url || "#") +
              '"><span class="title">' +
              (it.title || "") +
              '</span>' +
              (it.meta
                ? '<span class="meta muted-2-color em09">' + it.meta + "</span>"
                : "") +
              "</a>";
          });
          html += "</div>";
          suggestMount.innerHTML = html;
          suggestMount.hidden = false;
        } catch (e) {}
      };
      xhr.send(
        "action=aksrt_search_suggestions&nonce=" +
          encodeURIComponent(nonce()) +
          "&q=" +
          encodeURIComponent(q) +
          "&type=" +
          encodeURIComponent(typeValue())
      );
    }

    if (!input._aksrtMenuSearchBound) {
      input._aksrtMenuSearchBound = 1;
      input.addEventListener("input", function () {
        var q = (input.value || "").trim();
        if (timer) clearTimeout(timer);
        timer = setTimeout(function () {
          requestSuggest(q);
        }, 180);
      });
      input.addEventListener("focus", function () {
        var remote = form.querySelector("[data-aksrt-menu-search-remote]");
        if (remote) loadRemote(remote);
        var p = form.querySelector(".navbar-inline-search-panel");
        if (p) {
          p.classList.add("is-open");
          p.style.display = "block";
          p.style.visibility = "visible";
        }
      });
      form.addEventListener("submit", function () {
        var q = (input.value || "").trim();
        if (!q) return;
        if (!(window.aksrtData && aksrtData.isLoggedIn)) {
          var list = readLocalHistory().filter(function (k) {
            return k !== q;
          });
          list.unshift(q);
          writeLocalHistory(list);
        }
      });
    }
  }

  function init() {
    document.querySelectorAll("[data-aksrt-menu-search-remote]").forEach(function (box) {
      // Prefetch on idle / first hover of form.
      var form = box.closest("form");
      if (form) {
        form.addEventListener(
          "mouseenter",
          function () {
            loadRemote(box);
          },
          { once: true }
        );
      }
      // Also load when lazyload-action ias would fire — simple viewport/idle.
      if ("requestIdleCallback" in window) {
        requestIdleCallback(function () {
          loadRemote(box);
        });
      } else {
        setTimeout(function () {
          loadRemote(box);
        }, 600);
      }
    });

    var form = document.querySelector('form[data-aksrt-search-form="inline"]');
    if (form) enhancePanel(form);
  }

  if (window.AksrtFrontend && typeof window.AksrtFrontend.register === "function") {
    window.AksrtFrontend.register("aksrt-inline-search-suggest", function () {
      init();
    });
  } else if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }
})();