Show 'No Results Found' message when no tags match search

- Add .no-tags-message style to _cases.scss
- Add toggleNoTagsMessage function to searchInputHandler.js
- Show message in case-studies-page index.html when no tags are visible

Author: IhorMasechko

website/modules/asset/ui/src/scss/_cases.scss

@@ -147,6 +147,13 @@
   }
 }
 
+.no-tags-message {
+  display: none;
+  margin: 0;
+  color: $gray-300;
+  @include font-settings(11px, 140%, $font-weight-medium);
+}
+
 // Pagination
 .pagination-container {
   margin-top: 3rem;

website/modules/asset/ui/src/searchInputHandler.js

@@ -4,6 +4,22 @@ const removePreviousHandler = (input) => {
   }
 };
 
+const toggleNoTagsMessage = (
+  tagItems,
+  hasVisible,
+  parentSelector = '.filter-section',
+) => {
+  const parent = tagItems[0]?.closest(parentSelector);
+  const messageEl = parent?.querySelector('.no-tags-message');
+  if (messageEl) {
+    if (hasVisible) {
+      messageEl.style.display = 'none';
+    } else {
+      messageEl.style.display = 'block';
+    }
+  }
+};
+
 const getFilterValue = (input) => {
   return input.value.trim().toLowerCase();
 };
@@ -12,15 +28,20 @@ const getTagItems = (container, tagSelector) => {
   return container.querySelectorAll(tagSelector);
 };
 
-const filterTagItems = (tagItems, filterValue, getTagLabel) => {
+const filterTagItems = (tagItems, filterValue, getTagLabel, parentSelector) => {
+  let hasVisible = false;
+
   tagItems.forEach((tagItem) => {
     const tagLabel = getTagLabel(tagItem);
     if (tagLabel.includes(filterValue)) {
       tagItem.style.display = '';
+      hasVisible = true;
     } else {
       tagItem.style.display = 'none';
     }
   });
+
+  toggleNoTagsMessage(tagItems, hasVisible, parentSelector);
 };
 
 const handleTagSearch = (
@@ -34,7 +55,7 @@ const handleTagSearch = (
   if (!container) return;
 
   const tagItems = getTagItems(container, tagSelector);
-  filterTagItems(tagItems, filterValue, getTagLabel);
+  filterTagItems(tagItems, filterValue, getTagLabel, containerSelector);
 };
 
 const createTagSearchHandler = (

website/modules/case-studies-page/views/index.html

@@ -147,6 +147,7 @@
             </li>
             {% endif %} {% endfor %}
           </ul>
+          <p class="no-tags-message">No Results Found</p>
         </div>
         {% endif %} {% endfor %}
       </div>