From 9e0d7391628411ea5bfb8327c5c6c2f745a23dd0 Mon Sep 17 00:00:00 2001
From: Peter Stuifzand <peter@stuifzand.eu>
Date: Sun, 17 May 2020 23:58:48 +0200
Subject: [PATCH] Make search results nicer

---
 editor/src/index.js   |  2 +-
 editor/src/search.js  | 20 +++++++++++++++++++-
 templates/layout.html |  7 +++++--
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/editor/src/index.js b/editor/src/index.js
index 5518a2f..8d4659e 100644
--- a/editor/src/index.js
+++ b/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');
diff --git a/editor/src/search.js b/editor/src/search.js
index 1fc443a..6995842 100644
--- a/editor/src/search.js
+++ b/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
+                }
             })
         })
     })
diff --git a/templates/layout.html b/templates/layout.html
index 674f974..4cd71af 100644
--- a/templates/layout.html
+++ b/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>