Sha256: 98b3fddc2d0d02f1a37886fb4b1e91c4eaccdc32386e83388223929e1a4c9ddb
Contents?: true
Size: 1.76 KB
Versions: 15
Compression:
Stored size: 1.76 KB
Contents
<div class="form form--search">
<form id="contact-form" action="">
<label class="label" for="search">Search term:</label>
<input class="input" id="search" type="search" name="search" placeholder="e.g. About us" autocomplete="off" />
<ul class="list list--results" id="list">
<!-- results go here -->
</ul>
</form>
</div>
<script type="text/javascript" src="{{ "/assets/scripts/fetch.js" | relative_url }}"></script>
<script type="text/javascript">
const endpoint = '{{ "/assets/search.json" | relative_url }}';
const pages = [];
fetch(endpoint)
.then(blob => blob.json())
.then(data => pages.push(...data))
function findResults(termToMatch, pages) {
return pages.filter(item => {
const regex = new RegExp(termToMatch, 'gi');
return item.title.match(regex) || item.content.match(regex);
});
}
function displayResults() {
const resultsArray = findResults(this.value, pages);
const html = resultsArray.map(item => {
return `
<li class="item item--result">
<article class="article typeset">
<h4><a href="${item.url}">${item.title}</a></h4>
<p>${item.excerpt}</p>
</article>
</li>`;
}).join('');
if ((resultsArray.length == 0) || (this.value == '')) {
resultsList.innerHTML = `<p>Sorry, nothing was found</p>`;
} else {
resultsList.innerHTML = html;
}
}
const field = document.querySelector('#search');
const resultsList = document.querySelector('#list');
field.addEventListener('keyup', displayResults);
field.addEventListener('keypress', function(event) {
if (event.keyCode == 13) {
event.preventDefault();
}
});
</script>
<noscript>Please enable JavaScript to use the search form.</noscript>
Version data entries
15 entries across 15 versions & 1 rubygems