Update searching based on Fuse.js

2 files changed, 41 insertions, 0 deletions

diff --git a/assets/js/fuji.js b/assets/js/fuji.js
index b72c30e..d1be458 100644
--- a/assets/js/fuji.js
+++ b/assets/js/fuji.js
@@ -83,3 +83,40 @@ document.querySelector('.btn .btn-toggle-mode').addEventListener('click', () =>
         }
     }
 });
+
+// search by fuse.js
+function searchAll(key, index) {
+    let fuse = new Fuse(index, {
+        keys: ['title', 'tags'],
+    });
+    let result = fuse.search(key);
+    console.log(result);
+    if (result.length > 0) {
+        document.getElementById('search-result').innerHTML = template('search-result-template', result);
+    }
+}
+
+let urlParams = new URLSearchParams(window.location.search); // get params from URL
+if (urlParams.has('search')) {
+    let key = urlParams.get('search'); // get search keyword
+    document.querySelector('.search-input input').setAttribute('value', key);
+    // get search index from json
+    let xhr = new XMLHttpRequest();
+    xhr.open('GET', '/index.json', true);
+    xhr.responseType = 'json';
+    xhr.onerror = function (e) {
+        console.error(`${xhr.status} ${xhr.statusText}`);
+    };
+    xhr.onload = function () {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                // use index json to search
+                console.log(xhr.response);
+                searchAll(key, xhr.response);
+            } else {
+                console.error(`${xhr.status} ${xhr.statusText}`);
+            }
+        }
+    };
+    xhr.send(null);
+}
diff --git a/assets/scss/_fuji-style/_content.scss b/assets/scss/_fuji-style/_content.scss
index bc3e579..df223e9 100644
--- a/assets/scss/_fuji-style/_content.scss
+++ b/assets/scss/_fuji-style/_content.scss
@@ -169,3 +169,7 @@ article {
 #disqus_thread {
     padding: 1.25rem 0;
 }
+
+#search-result .post:first-child {
+    padding: 1.5rem 0;
+}