CMS Filter Search Field stops working when no results on page

Attributes
1

We got a CMS templated page that has no results displayed so when trying to use the search bar to enter. Upon pressing enter, it defaults back to Webflow’s form and displays the default error message.

https://preview.webflow.com/preview/cihr?utm_medium=preview_link&utm_source=designer&utm_content=cihr&preview=eaecd7965b734b72b66a81fd7385ce69&pageId=630fbafc5f7f0424fb29e254&itemId=630fbb0cc8b18815f067dce6&workflow=preview

2

hey @info2 this may be because there are no items on the list therefore the list is not on the page and the missing attributes break the implementation as you can see in the screenshot below.

Screen Shot 2023-06-28 at 13.55.52
Screen Shot 2023-06-28 at 13.55.522880×1598 474 KB

You also seem to have some custom code to hide empty filter UI that is not working as expected, let me know what is the intended behavior so I can help you debug it.

3

Would it be possible to hide the search bar if no list items are present? Also open to your suggestion on what’s best to solve this.

4

We can check if any items have been rendered and with this hide the search bar as the user types, this would be an example of the functionality:

<script>
      window.fsAttributes = window.fsAttributes || [];
      window.fsAttributes.push([
        'cmsfilter',
        (filterInstances) => {
          console.log('cmsfilter Successfully loaded!');

          // The callback passes a `filterInstances` array with all the `CMSFilters` instances on the page.
          const [filterInstance] = filterInstances;

          let searchBar = document.getElementById('email-form');

          // The `renderitems` event runs whenever the list renders items after filtering.
          filterInstance.listInstance.on('renderitems', (renderedItems) => {
            searchBar.style.display = Object.keys(renderedItems).length === 0 ? 'none' : 'block';
          });
        },
      ]);
    </script>
5

Thanks @Support-Luis! I’m getting an error on the console, am I missing something?

6

Yes, the error is there because in that particular page, we have no list to filter. Will this code be used to hide the search UI only for this scenario? Or will it be used to hide the filter elements if the search produces no result?

7

I’m looking to hide the Search UI if there is no list to filter.

8

Then this should solve the issue

<script>
      window.fsAttributes = window.fsAttributes || [];
      window.fsAttributes.push([
        'cmsfilter',
        (filterInstances) => {
          let searchBar = document.getElementById('email-form');
          searchBar.style.display = filterInstances.length === 0 ? 'none' : 'block';
        },
      ]);
    </script>