demo/index.html

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta content="This is the description of the index.html landing page that will be indexed and used as a summary ;-)"
        name="description"/>
  <meta content="Search, search page, Index" name="keywords"/>
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  <title>Search Page</title>
  <style>
    form {
      text-align: center
    }

    .mvw-search-field {
      font-size: 3rem;
      margin: 15px 0 40px;
      max-width: 100%
    }

    .results {
      padding-left: 0
    }

    .results li {
      list-style: none
    }

    .results a:first-of-type {
      display: block;
      font-size: 1.5rem;
      padding: 15px 0 2px
    }
  </style>
</head>

<body itemscope itemtype="http://schema.org/SearchResultsPage">
<h1>Description</h1>
<p>This page is used to demonstrate the use of lunr with an index generated with mvw-search-index.</p>
<p>Use <code>npm run serve</code> to rebuild the <code>index.json</code> and serve this page.</p>

<h1 class="page-header">Search</h1>
<div>
  <form itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
    <meta content="search.html?q={query}" itemprop="target">
    <input class="mvw-search-field" itemprop="query-input" name="query" placeholder="Suche..." type="search">
  </form>

  <ol class="results"></ol>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lunr.js/2.3.9/lunr.min.js"></script>
<script>
  var MVW;
  (function (MVW) {
    var Search;
    (function (Search) {
      var index;
      var store;

      function handleSearch(e) {
        var query = $("input.mvw-search-field").val();
        var result = index.search(query);
        var resultContainer = $(".results");
        if (result.length === 0) {
          resultContainer.innerHTML("No matches found...");
        } else {
          resultContainer.empty();
          for (var item in result) {
            if (result.hasOwnProperty(item)) {
              var ref = result[item].ref;
              var i = "<li><a href=\"" + ref + "\">" + store[ref].title + "</a><span>" + store[ref].description + "</span></li>";
              resultContainer.append(i);
            }
          }
          resultContainer.show();
        }
      }

      function getParameterByName(name) {
        var url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
        var results = regex.exec(url);
        if (!results) {
          return null;
        }
        if (!results[2]) {
          return "";
        }
        return decodeURIComponent(results[2].replace(/\+/g, " "));
      }

      function initialize() {
        $.getJSON("/index.json", function (data) {
          index = lunr.Index.load(data.index);
          store = data.store;
          var query = getParameterByName("query") || getParameterByName("q");
          var inputField = $("input.mvw-search-field");
          if (query) {
            inputField.val(query);
          }
          inputField.on("keyup", handleSearch);
          handleSearch(null);
        });
      }

      Search.initialize = initialize;
    })(Search = MVW.Search || (MVW.Search = {}));
  })(MVW || (MVW = {}));
  $(function () {
    return MVW.Search.initialize();
  });
</script>

<em>
  This page's body will not be indexed, since it is lacking <code>class="to-be-indexed"</code> specified in the
  command generating <code>index.json</code> defined in the <code>package.json</code>. This unique term is hence not
  to be found: NotToBeFound.
</em>

</body>
</html>