Added proper message when no search results found (#924)

assets/html_files/accordions.html

@@ -67,6 +67,12 @@
             <h1 class="SearchAccordion">Search Accordion</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Accordion Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="contain">
             <div class="box">
                 <h1>3D Accordion</h1>

assets/html_files/backgrounds.html

@@ -66,6 +66,12 @@
             <h1 class="SearchBackground">Search Background</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Background Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="contain">
             <div class="box">
                 <h1>3D Boxes Background</h1>

assets/html_files/breadcrumbs.html

@@ -66,6 +66,12 @@
             <h1 class="SearchBreadcrumb">Search Breadcrumb</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter breadcrumbs Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="contain">
             <div class="box">
                 <h1>3D Breadcrumb</h1>

assets/html_files/buttons.html

@@ -66,6 +66,12 @@
             <h1 class="SearchButton">Search Button</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Button Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="contain">
             <div class="box">
                 <h1>3D Button</h1>

assets/html_files/cards.html

@@ -66,6 +66,12 @@
             <h1 class="SearchCard">Search Card</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Card Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="contain">
             <div class="box">
                 <h1>3D Animated Card</h1>

assets/html_files/carousels.html

@@ -66,6 +66,12 @@
             <h1 class="SearchCarousel">Search Carousel</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Carousel Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="contain">
             <div class="box">
                 <h1>3D Image Carousel</h1>

assets/html_files/dropdowns.html

@@ -66,6 +66,12 @@
             <h1 class="SearchDropdown">Search Dropdown</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Dropdown Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="contain">
             <div class="box">
                 <h1>Apple Themed Dropdown</h1>

assets/html_files/footers.html

@@ -66,6 +66,12 @@
             <h1 class="SearchFooter">Search Footer</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Footer Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="contain">
             <div class="box">
                 <h1>Animated Footer</h1>

assets/html_files/forms.html

@@ -66,6 +66,12 @@
             <h1 class="SearchForm">Search Form</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Forms Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="contain">
             <div class="box">
                 <h1>Animated Border Login Form</h1>

assets/html_files/loaders.html

@@ -66,6 +66,12 @@
             <h1 class="SearchLoader">Search Loader</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Loader Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="contain">
             <div class="box">
                 <h1>Bird Loader</h1>

assets/html_files/navigation-bars.html

@@ -66,6 +66,12 @@
             <h1 class="SearchNavigationbar">Search Navigation Bar</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter NavBar Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="contain">
             <div class="box">
                 <h1>3D Reveal Side Navigation Bar</h1>

assets/html_files/popups.html

@@ -67,6 +67,13 @@
             <h1 class="SearchPopup">Search Popups</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Popup Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
+
         <div class="contain">
             <div class="box">
                 <h1>Confirmation Dialog Popup</h1>

assets/html_files/search-bars.html

@@ -66,6 +66,12 @@
             <h1 class="SearchSearchbar">Search Search Bar</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter SearchBar Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="contain">
             <div class="box">
                 <h1>3D Search Bar </h1>

assets/html_files/text-animations.html

@@ -66,6 +66,12 @@
             <h1 class="SearchTextanimation">Search Text Animation</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Text Animation Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="contain">
             <div class="box">
                 <h1>3D Cylindrically Rotating Text Animation</h1>

assets/html_files/transfer-lists.html

@@ -66,6 +66,12 @@
             <h1 class="SearchTransferlist">Search Transfer List</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Transfer List Name" oninput="filtereachComponents()">
         </div>
+
+        <div class="no-results">
+            <img src="../images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="contain">
             <div class="box">
                 <h1>Neumorphism Transfer List</h1>

assets/js_files/search.js

@@ -7,15 +7,23 @@ function filtereachComponents() {
     console.log(filter)
     console.log(components)
 
+    let selected_components = 0;
     for (i = 0; i < components.length; i++) {
         var component = components[i];
         var h2 = component.querySelector('h1');
         var componentName = h2.textContent || h2.innerText;
 
         if (componentName.toUpperCase().indexOf(filter) > -1) {
             component.style.display = "block";
+            selected_components++;
         } else {
             component.style.display = "none";
         }
     }
+
+    if (selected_components === 0) {
+        document.querySelector(".no-results").style.display = "flex";
+    } else {
+        document.querySelector(".no-results").style.display = "none";
+    }
 }

index.html

@@ -80,6 +80,11 @@ <h1>Search Component</h1><br>
             <input type="text" id="componentSearch" placeholder="Enter Component Name" oninput="filterComponents()">
         </div>
 
+        <div class="no-results">
+            <img src="./assets/images/no-results.png" alt="" height="100px" width="100px">
+            <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
+        </div>
+
         <div class="zoom-effect">
             <div class="box">
                 <a href="./assets/html_files/accordions.html" target="_blank">

script.js

@@ -43,17 +43,24 @@ function filterComponents() {
     console.log(filter)
     console.log(components)
 
+    let selected_components = 0;
     for (i = 0; i < components.length; i++) {
         var component = components[i];
         var h2 = component.querySelector('h2');
         var componentName = h2.textContent || h2.innerText;
 
         if (componentName.toUpperCase().indexOf(filter) > -1) {
             component.style.display = "flex";
+            selected_components++;
         } else {
             component.style.display = "none";
         }
     }
+    if (selected_components === 0) {
+        document.querySelector(".no-results").style.display = "flex";
+    } else {
+        document.querySelector(".no-results").style.display = "none";
+    }
 }
 
 // Voice command in search bar feature

style.css

@@ -717,6 +717,21 @@ footer p a {
     box-shadow: -5px -5px 10px #9961a1;
 }
 
+.no-results {
+    display: none;
+    padding-top: 50px;
+    color: white;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+}
+
+.no-results h2 {
+    text-align: center;
+}
+
 /* Media Queries */
 
 @media (max-width: 1030px) {