Last active
April 18, 2020 21:49
-
-
Save mwalters/81dc0ab448b11621514ed02c799a9536 to your computer and use it in GitHub Desktop.
Reference for: https://www.mattwalters.net/posts/hugo-and-lunr/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var idx = null; | |
var resultDetails = []; | |
var $searchResults; | |
var $searchInput; | |
var $headerSearch; | |
window.onload = function () { | |
var request = new XMLHttpRequest(); | |
var query = ''; | |
$searchResults = document.getElementById('search-results'); | |
$searchInput = document.getElementById('search-input'); | |
$headerSearch = document.getElementById('header-search'); | |
query = (getParameterByName('q')) ? getParameterByName('q').trim() : ''; | |
request.overrideMimeType("application/json"); | |
request.open("GET", "/index.json", true); | |
request.onload = function() { | |
if (request.status >= 200 && request.status < 400) { | |
// Success! | |
var documents = JSON.parse(request.responseText); | |
idx = lunr(function () { | |
this.ref('ref'); | |
this.field('title'); | |
this.field('excerpt'); | |
this.field('body'); | |
documents.forEach(function(doc) { | |
this.add(doc); | |
resultDetails[doc.ref] = { | |
'title': doc.title, | |
'excerpt': doc.excerpt, | |
}; | |
}, this); | |
}); | |
if (query != '') { | |
$searchInput.value = query; | |
$headerSearch.value = query; | |
renderSearchResults(search(query)); | |
} | |
} else { | |
$searchResults.innerHTML = 'Error loading search results'; | |
} | |
}; | |
request.onerror = function() { | |
$searchResults.innerHTML = 'Error loading search results'; | |
}; | |
request.send(); | |
registerSearchHandlers(); | |
}; | |
function registerSearchHandlers() { | |
$searchInput.oninput = function(event) { | |
var query = event.target.value; | |
var results = search(query); | |
$headerSearch.value = query; | |
updateQueryParam(query); | |
renderSearchResults(results); | |
if ($searchInput.value == '') { | |
$searchResults.innerHTML = ''; | |
} | |
} | |
if ($searchInput) { | |
$headerSearch.oninput = function(event) { | |
var query = event.target.value; | |
$searchInput.value = query; | |
updateQueryParam(query); | |
renderSearchResults(search(query)); | |
} | |
} | |
} | |
function search(query) { | |
return idx.search(query); | |
} | |
function renderSearchResults(results) { | |
// Create a list of results | |
var ul = document.createElement('ul'); | |
if (results.length > 0) { | |
results.forEach(function(result) { | |
// Create result item | |
var li = document.createElement('li'); | |
li.classList.add('card'); | |
li.innerHTML = '<div class="card-header"><a href="' + result.ref + '">' + resultDetails[result.ref].title + '</a></div><div class="card-body"><p class="card-text text-muted search-result-excerpt">' + resultDetails[result.ref].excerpt + '</p></div>'; | |
ul.appendChild(li); | |
}); | |
// Remove any existing content | |
while ($searchResults.hasChildNodes()) { | |
$searchResults.removeChild( | |
$searchResults.lastChild | |
); | |
} | |
} else { | |
$searchResults.innerHTML = 'No results found'; | |
} | |
// Render the list | |
$searchResults.appendChild(ul); | |
} | |
function getParameterByName(name, url) { | |
if (!url) url = window.location.href; | |
name = name.replace(/[\[\]]/g, "\\$&"); | |
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), | |
results = regex.exec(url); | |
if (!results) return null; | |
if (!results[2]) return ''; | |
return decodeURIComponent(results[2].replace(/\+/g, " ")); | |
} | |
function updateQueryParam(query) { | |
history.pushState('', '', '/search/?q=' + query); | |
} |
With this file, I get this error:
TypeError: $headerSearch is nullsearch.js:73:5 registerSearchHandlers http://localhost:1313/search.js:73 onload http://localhost:1313/search.js:54
The working file on your site mattwalters.net/search/differs from this file. But in using that file and following your docs at mattwalters.net/posts/hugo-and-lunr/ I get "Error loading search results".
Do you have an element with the id header-search
? If not, you'll probably need to tweak some of the code in the javascript so it doesn't try to locate elements that don't exist.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
With this file, I get this error:
The working file on your site mattwalters.net/search/differs from this file. But in using that file and following your docs at mattwalters.net/posts/hugo-and-lunr/ I get "Error loading search results".