Skip to content

Instantly share code, notes, and snippets.

@flohei
Last active October 28, 2016 15:03
Show Gist options
  • Save flohei/91d987a1827023bef8ca to your computer and use it in GitHub Desktop.
Save flohei/91d987a1827023bef8ca to your computer and use it in GitHub Desktop.
An example search page for Jekyll running the jekyll-lunr-js-search plugin.
---
layout: default
permalink: /search/
---
<!--
http://10consulting.com/2013/03/06/jekyll-and-lunr-js-static-websites-with-powerful-full-text-search-using-javascript/
-->
<div class="home">
<header class="post-header">
<h1>Search</h1>
</header>
<article class="post-content">
<div id="search">
<form action="/search" method="get">
<input type="text" id="search-query" name="q" placeholder="Search" autocomplete="on">
</form>
</div>
<section id="search-results" style="display: none;">
<p>Search results</p>
<div class="entries">
</div>
</section>
{% raw %}
<script id="search-results-template" type="text/mustache">
{{#entries}}
<article>
<h3>
{{#date}}<small><time datetime="{{pubdate}}" pubdate>{{displaydate}}</time></small>{{/date}}
<a href="{{url}}">{{title}}</a>
</h3>
</article>
{{/entries}}
</script>
{% endraw %}
<script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$('#search-query').lunrSearch({
indexUrl: '/js/index.json', // URL of the `index.json` index data for your site
results: '#search-results', // jQuery selector for the search results container
entries: '.entries', // jQuery selector for the element to contain the results list, must be a child of the results element above.
template: '#search-results-template' // jQuery selector for the Mustache.js template
});
});
</script>
</article>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment