Resource Listing - Display Text if No Results Match

Developer Support CMS Development
1

I have a resource listing page with filters and keyword search. I am looking to adapt the following code so that if the filters and keyword search don’t match anything then text is displayed in the main listing div (resource-items). The following code is where the filters/search check if there are matches:

// Filtering Functionality
 var searchInput = document.getElementById("searchInput");
 var categoryCheckboxes = document.querySelectorAll('input[name="category"]');
 var typeCheckboxes = document.querySelectorAll('input[name="type"]');
 var category2Checkboxes = document.querySelectorAll('input[name="category2"]');
 var contents = document.querySelectorAll(".content");

 function filterResources() {
 var searchValue = searchInput ? searchInput.value.toLowerCase() : "";
 var selectedCategories = Array.from(categoryCheckboxes)
 .filter((checkbox) => checkbox.checked)
 .map((checkbox) => checkbox.value.toLowerCase());
 var selectedTypes = Array.from(typeCheckboxes)
 .filter((checkbox) => checkbox.checked)
 .map((checkbox) => checkbox.value.toLowerCase());
 var selectedCategories2 = Array.from(category2Checkboxes)
 .filter((checkbox) => checkbox.checked)
 .map((checkbox) => checkbox.value.toLowerCase());

 contents.forEach(function (content) {
 var contentCategory = content.dataset.category.toLowerCase();
 var contentType = content.dataset.type.toLowerCase();
 var contentCategory2 = content.dataset.category2.toLowerCase();
 var contentText = content.textContent.toLowerCase();

 var matchesCategory = selectedCategories.length === 0 || selectedCategories.includes(contentCategory);
 var matchesType = selectedTypes.length === 0 || selectedTypes.includes(contentType);
 var matchesCategory2 = selectedCategories2.length === 0 || selectedCategories2.includes(contentCategory2);
 var matchesSearch = searchValue === "" || contentText.includes(searchValue);

 if (matchesCategory && matchesType && matchesCategory2 && matchesSearch) {
 content.style.display = "block";
 } else {
 content.style.display = "none";
 }
 });

What is the best way to alter the javascript to add ‘No Results Found’ message?
Thanks

2

Hey, @Woodsy :waving_hand: Can you share what you’ve already tried for your No Results message? This might give our community members more to work with. Talk soon! — Jaycee

3

Hi, I haven’t tried anything yet as I am unsure what to do. Each list item is in it’s own container div called <content>. all the list items sit within a div called resource-items.

<div class="resource-items">
<!-- Each list item is added here-->
 <div class="content">
 <!-- Item 1-->
 </div>
 <div class="content">
 <!-- Item 2 etc...-->
 </div>
</div>

The filter code would check to see if there are any matches and if not rather than leave <resource-items> blank it would display the text ‘No Match’.

4

Hi Jaycee_Lewi I’m just checking to see if there is anyone who might be able to point me in the right direction? Thanks

5

I am happy to ask some of our community members if they have any feedback for you – hey @Anton @evaldas do you have any feedback for @Woodsy? Thank you very much! — Jaycee