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}" title="Result - ${item.title}">${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

3 entries across 3 versions & 1 rubygems

Version	Path
alembic-jekyll-theme-2.1.0	_includes/site-search.html
alembic-jekyll-theme-2.0.3	_includes/site-search.html
alembic-jekyll-theme-2.0.2	_includes/site-search.html