search.html

---
layout: page_default
title: 'Search'
---
<section>
<form action="{{site.baseurl}}/search.html" method="get" id="site-search">
  <input type="text" id="search-box" name="query" placeholder="statement of joe spooky" />
  <input type="submit" value="Search" />
</form>

<hr/>

<h3 class="search-results-header">Results:</h3>

<ul id="search-results"></ul>
</section>

<script>
  window.store = {
  {% for post in site.posts %}
    "{{ post.url | slugify }}": {
      "title": "{{ post.title | xml_escape }}",
      "summary": "{{ post.summary | xml_escape }}",
      "content": {{ post.content | strip_html | strip_newlines | jsonify }},
      "url": "{{ post.url | xml_escape }}"
    }
    {% unless forloop.last %},{% endunless %}
  {% endfor %}
  };
</script>
<script src="{{site.baseurl}}/js/lunr.js"></script>
<script>
  (function() {
    function displaySearchResults(results, store) {
      var searchResults = document.getElementById('search-results');

      if (results.length) { // Are there any results?
        var appendString = '';
        for (var i = 0; i < results.length; i++) {  // Iterate over the results
          var item = store[results[i].ref];
          appendString+='<li><a href="{{site.baseurl}}'+item.url+'">'+item.title+'</a>';
          appendString+='<p>'+item.summary+'...</p></li>';
        }
        searchResults.innerHTML = appendString;
      } else {
        searchResults.innerHTML = '<li>No results found.</li>';
      }
    }

    function getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split('&');

      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');

        if (pair[0] === variable) {
          return decodeURIComponent(pair[1].replace(/\+/g, '%20'));
        }
      }
    }

    var searchTerm = getQueryVariable('query');
    if (searchTerm) {
      document.getElementById('search-box').setAttribute("value", searchTerm);

      var idx = lunr(function () {
        this.field('id');
        this.field('title', { boost: 10 });
        this.field('summary');
        this.field('content');
        for (var key in window.store) { 
          this.add({
            'id': key,
            'title': window.store[key].title,
            'summary': window.store[key].summary,
            'content': window.store[key].content
          });
        };
      });

      var results = idx.search(searchTerm); // Get lunr to perform a search
      displaySearchResults(results, window.store);
    }
  })();

</script>