display results empty

src/layouts/partials/no-results-found.html

@@ -1,5 +1,5 @@
 <hr>
-  <section>
+  <section id="noResult" class="no-results">
     <div class="container black-bg">
       <div class="row">
         <div class="col two-boxes-up two-boxes-down">
@@ -10,3 +10,12 @@
     </div>
   </section>
 <hr>
+
+<style>
+  .no-results {
+    display: none;
+  }
+  .no-results.show {
+    display: block;
+  }
+</style>

src/layouts/partials/package-grid.html

@@ -24,6 +24,7 @@
           {{- partial "package-thumbnail.html" .}}
         {{ end }}
       </div>
+      {{- partial "no-results-found.html" }}
     </div>
   </div>
   <hr>
@@ -120,6 +121,7 @@
 
   const onSearch = debounce(() => {
     const searchInput = document.getElementById('searchTermDesktop');
+    const noResult = document.getElementById('noResult');
     if (searchInput.value) {
       const term = searchInput.value;
       const packages = getPackageThumbs();
@@ -130,16 +132,25 @@
       });
       const grid = document.getElementById('packageGrid');
       grid.textContent = '';
+      let searchCount = 0;
       for(const sp of sortedPackages) {
         const score = getMatchScore(term, sp.dataset);
         if (score > 20) {
           sp.classList.remove('hidden');
+          searchCount++;
         } else {
           sp.classList.add('hidden');
         }
         grid.appendChild(sp);
       }
+
+      if (searchCount) {
+        noResult.classList.remove('show');
+      } else {
+        noResult.classList.add('show');
+      }
     } else {
+      noResult.classList.remove('show');
       sortPackages();
     }
   }, 300);