# CMS Filter Search Field stops working when no results on page

**URL:** <https://forum.finsweet.com/t/cms-filter-search-field-stops-working-when-no-results-on-page/1569>\
**Category:** Attributes\
**Created:** [June 28, 2023, 5:05pm UTC](https://forum.finsweet.com/t/cms-filter-search-field-stops-working-when-no-results-on-page/1569 "2023-06-28T17:05:45Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![info2](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/info2/32/359_2.png) [@info2](https://forum.finsweet.com/u/info2)\
**Post date:** [June 28, 2023, 5:05pm UTC](https://forum.finsweet.com/t/cms-filter-search-field-stops-working-when-no-results-on-page/1569/1 "2023-06-28T17:05:46Z")

</div>

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](https://preview.webflow.com/preview/cihr?utm_medium=preview_link&utm_source=designer&utm_content=cihr&preview=eaecd7965b734b72b66a81fd7385ce69&pageId=630fbafc5f7f0424fb29e254&itemId=630fbb0cc8b18815f067dce6&workflow=preview)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [June 28, 2023, 7:57pm UTC](https://forum.finsweet.com/t/cms-filter-search-field-stops-working-when-no-results-on-page/1569/2 "2023-06-28T19:57:31Z")

</div>

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](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/1X/48b1b35463ffc3512e392c89471ac2752d14d4aa.png)

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.

---

<div class="post-metadata">

**Author:** ![info2](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/info2/32/359_2.png) [@info2](https://forum.finsweet.com/u/info2)\
**Post date:** [June 28, 2023, 10:23pm UTC](https://forum.finsweet.com/t/cms-filter-search-field-stops-working-when-no-results-on-page/1569/3 "2023-06-28T22:23:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [June 28, 2023, 10:56pm UTC](https://forum.finsweet.com/t/cms-filter-search-field-stops-working-when-no-results-on-page/1569/4 "2023-06-28T22:56:26Z")

</div>

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:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![info2](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/info2/32/359_2.png) [@info2](https://forum.finsweet.com/u/info2)\
**Post date:** [June 29, 2023, 12:50am UTC](https://forum.finsweet.com/t/cms-filter-search-field-stops-working-when-no-results-on-page/1569/5 "2023-06-29T00:50:38Z")

</div>

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

> **[Egg Donation Category](https://www.ihrfertility.com/blog-category/egg-donation)**
>
> Read more on Egg Donation content.

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [June 29, 2023, 2:12am UTC](https://forum.finsweet.com/t/cms-filter-search-field-stops-working-when-no-results-on-page/1569/6 "2023-06-29T02:12:04Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![info2](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/info2/32/359_2.png) [@info2](https://forum.finsweet.com/u/info2)\
**Post date:** [June 29, 2023, 3:07am UTC](https://forum.finsweet.com/t/cms-filter-search-field-stops-working-when-no-results-on-page/1569/7 "2023-06-29T03:07:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [June 29, 2023, 4:03pm UTC](https://forum.finsweet.com/t/cms-filter-search-field-stops-working-when-no-results-on-page/1569/8 "2023-06-29T16:03:09Z")

</div>

Then this should solve the issue

```auto
<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>

```