I have a small static site with a basic word search powered by Lunr.js. I have a search field that lives in the header of each HTML page. I am using a fake json because I do not need Jekyll
const fakeJSON = [
{
title: "Test",
content:
"Chocolate bar cupcake chocolate bar cake oat cake sweet roll chocolate cake chupa chups danish. Chocolate cake marshmallow cake cheesecake powder. Candy canes chocolate chupa chups liquorice donut chocolate cake apple pie cupcake soufflé. Halvah gingerbread powder cupcake apple pie chocolate cake. Halvah wafer liquorice sweet roll jelly tart soufflé croissant. Ice cream macaroon lemon drops liquorice ice cream pastry. ",
href: "test.html"
}
Search html
<div class="search-flex">
<form id="search-form" name="searchForm" role="form" onsubmit="return false">
<div class="search-wrapper">
<div class="search-container">
<i class="fa fa-search"></i>
<input autocomplete="off" placeholder="" id="search" class="search-input" aria-label="Search site" type="text" name="q">
</div>
<div class="search-error hide-element"><span class="search-error-message"></span></div>
</div>
</form>
<button id="clear-search-results-sidebar" class="button clear-search-results hide-element">Clear Search Results</button>
</div>
Here is the search.js output
function renderSearchResults(query, results) {
clearSearchResults();
updateSearchResults(query, results);
showSearchResults();
scrollToTop();
}
function showSearchResults() {
document.querySelector(".search-results").classList.remove("hide-element");
document.getElementById("site-search").classList.add("expanded");
document
.getElementById("clear-search-results-sidebar")
.classList.remove("hide-element");
}
I would love for the result to redirect to search.html and spit out results.
<div class="search-results"></div>