This is a jekyll theme inspired by jekyll-new (jekyll 2.0’s default theme), to showcase the jekyll-simple-search library.

Create search.json

Place the following code in a file called search.json in your Jekyll blog. (It’s hosted here or in https://github.com/sylhare/Simple-Jekyll-Search/tree/docs/assets/data)

This file will be used as a small data source to perform the searches on the client side:

---
layout: none
---
[
  {% for post in site.posts %}
    {
      "title"    : "{{ post.title | escape }}",
      "category" : "{{ post.category }}",
      "tags"     : "{{ post.tags | join: ', ' }}",
      "url"      : "{{ site.baseurl }}{{ post.url }}",
      "date"     : "{{ post.date }}"
    } {% unless forloop.last %},{% endunless %}
  {% endfor %}
]

SimpleJekyllSearch needs two DOM elements to work:

  • a search input field
  • a result container to display the results
<div id="search-demo-container">
  <input type="search" id="search-input" placeholder="search...">
  <ul id="results-container"></ul>
</div>

Add the script

Customize SimpleJekyllSearch by passing in your configuration options:

<script src="{{ '/assets/js/simple-jekyll-search.min.js' | prepend: site.baseurl }}"></script>

<script>
  window.simpleJekyllSearch = new SimpleJekyllSearch({
    searchInput: document.getElementById('search-input'),
    resultsContainer: document.getElementById('results-container'),
    json: '{{ "/assets/data/search.json" | relative_url }}',
    searchResultTemplate: '<li><a href="{url}?query={query}" title="{desc}">{title}</a></li>',
    noResultsText: 'No results found',
    limit: 10,
    fuzzy: true,
    exclude: ['Welcome']
  })
</script>