Make search results nicer
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Peter Stuifzand 2020-05-17 23:58:48 +02:00
parent f6577ed574
commit 9e0d739162
3 changed files with 25 additions and 4 deletions

View File

@ -94,7 +94,7 @@ search(searchInput).then(searcher => {
return return
} }
$('#autocomplete').show() $('#autocomplete').show()
let result = searcher.idx.search(query) let result = searcher.search(query)
var template = document.getElementById('result-template').innerHTML; var template = document.getElementById('result-template').innerHTML;
var rendered = Mustache.render(template, {results: result}, {}, ['[[', ']]']); var rendered = Mustache.render(template, {results: result}, {}, ['[[', ']]']);
let autocomplete = document.getElementById('autocomplete'); let autocomplete = document.getElementById('autocomplete');

View File

@ -4,6 +4,11 @@ import $ from 'jquery';
function search(element) { function search(element) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
$.get('/documents.json', function (documents) { $.get('/documents.json', function (documents) {
let mappedDocuments = {}
$.each(documents, function (index, doc) {
mappedDocuments[doc.url] = doc
})
let idx = lunr(function () { let idx = lunr(function () {
this.ref('url') this.ref('url')
this.field('title') this.field('title')
@ -17,7 +22,20 @@ function search(element) {
resolve({ resolve({
element: element, element: element,
idx: idx idx: idx,
search(query) {
let result = this.idx.search(query)
let actualResult = [];
$.each(result, (key, value) => {
actualResult.push({
ref: value.ref,
title: mappedDocuments[value.ref].title,
})
})
return actualResult
}
}) })
}) })
}) })

View File

@ -19,7 +19,10 @@
position: absolute; position: absolute;
background: white; background: white;
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 24px; padding: 16px;
}
#autocomplete li > a {
white-space: nowrap;
} }
.monospace { .monospace {
@ -214,7 +217,7 @@
<div id="result-template" class="hidden"> <div id="result-template" class="hidden">
<ul> <ul>
[[#results]] [[#results]]
<li><a href="/[[ref]]">[[ref]]</a></li> <li><a href="/[[ref]]">[[title]]</a></li>
[[/results]] [[/results]]
</ul> </ul>
</div> </div>