Tutorial Menambahkan Fitur Search di Hexo

<section>
  <h1 id="search-heading">Search Result for</h1>

  <!-- Hasil pencarian akan ditampilkan di sini -->
  <div id="search-results"></div>
	<nav id="search-pagination" aria-label="Pagination Navigation"></nav>
  <div class="search-loading" style="display: none;">Loading...</div>

  <!-- Template untuk mengatur tampilan hasil pencarian -->
  <script id="search-result-template" type="text/x-js-template">
    <article id="summary-${key}">
      <figure>
        <img src="${image}" alt="${title}">
      </figure>
      <div>
        <h2><a href="/${link}">${title}</a></h2>
        <p>${snippet}</p>
      </div>
    </article>
  </script>
</section>

const summaryInclude = 100;
const resultsPerPage = 12; // Jumlah hasil per halaman
let currentPage = 1; // Halaman saat ini

const fuseOptions = {
  shouldSort: true,
  includeMatches: false,
  findAllMatches: false,
  includeScore: true,
  tokenize: true,
  location: 0,
  ignoreLocation: false,
  threshold: 0.3,
  distance: 1000,
  maxPatternLength: 32,
  minMatchCharLength: 2,
  keys: [
    { name: "title", weight: 1 },
    { name: "content", weight: 0.1 },
    { name: "tags", weight: 0.1 },
    { name: "categories", weight: 0.05 },
  ],
};

const inputBox = document.getElementById("search-query");
const searchHeading = document.getElementById("search-heading");

if (inputBox !== null) {
  let searchQuery = param("q");

  if (searchQuery) {
    inputBox.value = searchQuery || "";
    executeSearch(searchQuery);
  }
}

function executeSearch(searchQuery) {
  fetch("/data/post-data.json")
    .then(response => response.json())
    .then(data => {
      const fuse = new Fuse(data, fuseOptions);
      const result = fuse.search(searchQuery);

      // Batasi hasil pencarian hingga 12 item per halaman
      const totalResults = result.length;
      const totalPages = Math.ceil(totalResults / resultsPerPage);
      const paginatedResults = result.slice((currentPage - 1) * resultsPerPage, currentPage * resultsPerPage);

      // Perbarui heading dengan query pencarian
      searchHeading.textContent = `Search Result for "${searchQuery}"`;

      populateResults(paginatedResults, totalResults, totalPages);
    })
    .catch(err => console.error("Error fetching search data:", err));
}

function populateResults(results, totalResults, totalPages) {
  const searchResults = document.getElementById("search-results");
  const pagination = document.getElementById("search-pagination");
  const template = document.getElementById("search-result-template").innerHTML;

  if (results.length > 0) {
    searchResults.innerHTML = results.map(result => {
      const item = result.item;
      const snippet = item.content.substring(0, summaryInclude) + "...";
      const tags = item.tags.join(", ");
      const output = render(template, {
        key: item.key,
        title: item.title,
        link: item.path,
        tags: tags,
        categories: item.categories,
        snippet: snippet,
        image: item.image,
      });
      return output;
    }).join("");

    // Tambahkan navigasi pagination jika lebih dari satu halaman
    if (totalPages > 1) {
      pagination.innerHTML = createPagination(totalPages);
    } else {
      pagination.innerHTML = "";
    }

  } else {
    searchResults.innerHTML = "<p>No results found</p>";
    pagination.innerHTML = "";
  }
}

function createPagination(totalPages) {
  let paginationHTML = "";

  for (let i = 1; i <= totalPages; i++) {
    paginationHTML += `<button class="pagination-button" data-page="${i}">${i}</button>`;
  }

  return paginationHTML;
}

function render(template, data) {
  return template.replace(/\${(.*?)}/g, (match, key) => data[key.trim()]);
}

// Event listener untuk navigasi pagination
document.addEventListener("click", function(event) {
  if (event.target.classList.contains("pagination-button")) {
    currentPage = parseInt(event.target.getAttribute("data-page"));
    const searchQuery = inputBox.value;
    executeSearch(searchQuery);
  }
});

// Helper Functions

function show(elem) {
  if (elem) {
    elem.style.display = "block";
  }
}

function hide(elem) {
  if (elem) {
    elem.style.display = "none";
  }
}

function param(name) {
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [,""])[1].replace(/\+/g, '%20')) || null;
}