Make search results nicer

editor/src/index.js

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

editor/src/search.js

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

templates/layout.html

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