CMS Filter - can a user search on one page and return the same query on a page with CMS filter search implemented?

Attributes
1

Hi! I’m working on my company’s support pages and I have CMS filter and search successfully implemented on our browse all support page.

I’m wondering if I can allow users to search for their query on our support home page. Currently, the search in the hero of this page is just a standard site search, and ideally I’d like searching from this page to take the user to the browse all page with the query already in the URL. I’m assuming I’d need to swap this search bar to a form text input but beyond that I’m not sure what the next step is.

Webflow read only: https://preview.webflow.com/preview/user-interviews-home?utm_medium=preview_link&utm_source=designer&utm_content=user-interviews-home&preview=edb7a832fc31b2b98ae3147744b55ba4&pageId=66156d878f62672269c7561a&workflow=preview

Thank you!

2

Hey @holly!

This can be done with some simple JS.

You’ll need to add this code to the /support page

<script>
      const userInput = document.getElementById('search-2');
      const form = document.querySelector('.hero-support-search.w-form');

      form.addEventListener('submit', function (e) {
        e.preventDefault();
        const searchInput = userInput.value;
        if (!searchInput) return;
        const queryParam = searchInput.replaceAll(' ', '+');

        let url = '/browse-support?*=' + queryParam;

        // console.log(url); // For testing
        window.location.href = url; // Uncomment this line to redirect to the constructed URL
      });
</script>

and this code to your /browse-support page.

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');
      document.getElementById('field').dispatchEvent(new Event('input', { bubbles: true }));
    },
  ]);
</script>

Note, you will have to change the text field identifier to fs-cmsfilter-field=*