better search?

layouts/_default/search.html

@@ -1,22 +1,59 @@
 {{ define "main" }}
 {{ partial "header" . }}
 
-<div id="searchutil" >
-<input id="search-query" name="s" autocomplete="off" placeholder="What are you looking for?" enterkeyhint="search"/>
-<div id="search-results">
-</div>
-</div>
-
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.0/fuse.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js"></script>
-<script src="{{ "js/search.js" | relURL }}"></script>
-<!-- this template is sucked in by search.js and appended to the search-results div above. So editing here will adjust style -->
-<script id="search-result-template" type="text/x-js-template">
+
+<script id="search-result-template" type="text/x-js-template" data-template="searchresult">
     <div id="summary-${key}">
       <h4><a href="${link}">${title}</a></h4>
       <p>${snippet}</p>
     </div>
 </script>
+
+
+<div id="searchutil" >
+    <input id="search-query" name="s" type="text" autocomplete="off" placeholder="What are you looking for?" enterkeyhint="search"/>
+<div id="search-results">
+</div>
+</div>
+
+
+<script type="module">
+    import { create, insertMultiple, search } from 'https://cdn.jsdelivr.net/npm/@orama/orama@latest/+esm'
+    let template = $('script[data-template="searchresult"]').text().split(/\$\{(.+?)\}/g);
+
+    function render(props) {
+        return function(tok, i) { return (i % 2) ? props[tok] : tok; };
+    }
+
+    const db = create({
+        schema: {
+            title: 'string',
+            content: 'string',
+        },
+    });
+    $.get("https://www.jemoka.com/index.json", function(data, status){
+        insertMultiple(db, data.map(x =>
+            ({title: x.title, content: x.contents, link: x.permalink})));
+    });
+    $("#search-query").on("keyup", function () {
+        let value = $(this).val();
+        let results = search(db, {mode: "fulltext", term: value});
+        let contents = results.hits.map(x => template.map(render({
+            title: x.document.title,
+            snippet: x.document.content.slice(1, 356),
+            key: x.id,
+            link: x.document.link
+        })).join(''));
+        $("#search-results").html(contents.join("\n"));
+        $("#search-results").mark(value);
+        // results.map()
+    });
+</script>
+<!-- <script src="{{ "js/search.js" | relURL }}"></script> -->
+<!-- this template is sucked in by search.js and appended to the search-results div above. So editing here will adjust style -->
+
 {{ partial "footer" . }}
 {{ end }}