<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('keydown', function(event) { if (event.key === 'Enter') { event.preventDefault(); } });
</script> <noscript>Please enable JavaScript to use the search form.</noscript>