search

LeoPaulD · Oct 18, 2021 · 9099630 · 9099630
1 parent 3d4edec
commit 9099630
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 2 deletions.
diff --git a/includes/fuse.js b/includes/fuse.js
diff --git a/includes/search.njk b/includes/search.njk
@@ -1,6 +1,6 @@
 <div class="font-sans text-black  bg-white flex items-center justify-center"  style="height: 100px;">
     <div class="border rounded overflow-hidden flex">
-        <input type="text" class="px-4 py-2" style="width: 300px;" placeholder="Rechercher une personnalité politique">
+        <input id="search-input" type="text" class="px-4 py-2" style="width: 300px;" placeholder="Rechercher une personnalité politique">
         <button class="flex items-center justify-center px-4 border-l">
             <svg class="h-4 w-4 text-grey-dark" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24">

diff --git a/layouts/home.njk b/layouts/home.njk
@@ -28,7 +28,8 @@ description: >
             <ul class="page-list grid gap-4 grid-cols-2">
                 {% for post in collections.personnes %}
                 {% if post.data.published !== false %}
-                  <a href="{{ post.url }}" class=" ">
+                  <a href="{{ post.url }}" class=" "
+                    data-people="{{ post.data.title }}">
 
 
 
@@ -58,6 +59,45 @@ description: >
 
     </div>
 
+    <script>{% include "fuse.js" %}</script>
+
+    <script>
+      const searchInput = document.getElementById('search-input');
+      let resultList = [];
+
+      searchInput.value = '';
+
+      const elts = document.querySelectorAll('[data-people]');
+
+      const searchData = Array.from(elts)
+        .map((elt) => {
+          return {
+            elt: elt,
+            title: elt.dataset.people
+          }
+        });
+
+      const fuse = new Fuse(searchData, {
+        includeScore: false,
+        keys: ['title'] // search field from nodes metas
+      });
+
+      searchInput.addEventListener('input', () => {
+        resultList = fuse.search(searchInput.value);
+
+        if (resultList.length === 0) {
+          elts.forEach(elt => elt.style.display = null);
+          return;
+        }
+
+        elts.forEach(elt => elt.style.display = 'none');
+
+        for (const result of resultList) {
+          result.item.elt.style.display =  null;
+        }
+      })
+    </script>
+
 </body>
 
 </html>