Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
lunr search template
---
layout: page
title: Search
noindex: true
---
<script src="https://unpkg.com/lunr/lunr.js"></script>
<script>
const BUFFER = 30 // Number of characters to show for kwic-results
const MAX_KWIC = 3 // Maximum number of KWIC results to show per page
var documents = [];
$.getJSON("/search/search.json", function (responseObject) {
documents = responseObject
idx = lunr(function () {
this.ref('id');
this.field('title');
this.field('body');
this.metadataWhitelist = ['position']
documents.forEach(function (doc) {
this.add(doc)
}, this)
});
})
function lunr_search(term) {
document.getElementById('lunrsearchresults').innerHTML = '<ul></ul>';
if (term) {
document.getElementById('lunrsearchresults').innerHTML = "<p>Search results for '" + term + "'</p>" + document.getElementById('lunrsearchresults').innerHTML;
var results = idx.search(term);
if (results.length > 0) {
for (var i = 0; i < results.length; i++) {
var ref = results[i]['ref'];
var url = documents[ref]['url'];
var title = documents[ref]['title'];
var text_body = documents[ref]['body']
var search_keys = Object.keys(results[i].matchData.metadata)
var inner_results = search_keys.map(function (token) {
var all_positions = results[i].matchData.metadata[token].body.position
var grouped_kwic = all_positions.slice(0, MAX_KWIC).map(function (pos) {
var loc1 = pos[0]
var loc2 = loc1 + pos[1]
var rendered_text = "<p>... " + text_body.substring(loc1 - BUFFER, loc1) + "<strong>" + text_body.substring(loc1, loc2) + "</strong>" + text_body.substring(loc2, loc2 + BUFFER) + "...</p>"
return rendered_text
}).join("")
return grouped_kwic
}).join("")
document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML = document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML + "<li class='lunrsearchresult list-group-item'><span class='title'><a href='" + url + "'>" + title + "</a></span><span>" + inner_results + "</span><span class='url'><a href='" + url + "'>" + url + "</span></a></li>";
}
} else {
document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML = "<li class='lunrsearchresult list-group-item'>No results found...</li>";
}
}
return false;
}
</script>
<style>
.lunrsearchresult .title {
color: #d9230f;
}
.lunrsearchresult .url {
color: silver;
}
.lunrsearchresult a {
display: block;
color: #777;
}
.lunrsearchresult a:hover,
.lunrsearchresult a:focus {
text-decoration: none;
}
.lunrsearchresult a:hover .title {
text-decoration: underline;
}
</style>
<form>
<p><input type="text" class="form-control" id="lunrsearch" name="q" maxlength="255" value=""
placeholder="Search via Lunr.js" onInput="return lunr_search(document.getElementById('lunrsearch').value);" /></p>
</form>
<div id="lunrsearchresults">
<ul class="list-group"></ul>
</div>
---
---
[
{% assign corpus = site.pages | where: "layout", "lesson" | where: "lang", "en" %}
{% for page in corpus %}
{% capture search_block %}
{{ page.title }}
{{ page.content | markdownify }}
{{ page.abstract | markdownify }}
{% endcapture %}
{
"id": {% increment counter %},
"url": {{ page.url | absolute_url | jsonify }},
"title": {{ page.title | jsonify }},
"body": {{ search_block | strip_html | jsonify }},
"noindex": {{ page.noindex }}
}{% if forloop.last %}{% else %},{% endif %}
{% endfor %}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment