Finsweet CMS Filter - Search field and Query paramaters

Design help Custom code
1

Hey people! I’m in a bit of problem with the Attributes CMS Filter by Finsweet and I can’t find anyone talking about this, so here I am.

I’m using CMS Filter to filter a Real Estate listing, so there’s a lot of filters. My home page, which is not the page with the whole listing, has a form in the top section with the goal of pre-filtering my listing page through query paramaters (get to home > type/click your filters > go to listing page with filters brought through params).

The problem is that the Search Field of the Attributes

  1. doesn’t seem to work with query params
  2. It only triggers the filter if I “type” something, so even if the value is passed to the input through query params, it doesn’t actually filter until I change the string.

This is after clicking “search” from the home page to the listing page

Screen Shot 2023-09-13 at 09.10.12
Screen Shot 2023-09-13 at 09.10.121295×538 32.9 KB

And this is after deleting one character (activating the search filter)

Screen Shot 2023-09-13 at 09.10.23
Screen Shot 2023-09-13 at 09.10.231255×507 32.6 KB

I tried using a dispatchEvent to maybe generate a “typing” event, but it didn’t work.

I’m really desperate for a solution. :cold_sweat:

Here is my site Read-Only: [LINK][1]

(https://preview.webflow.com/preview/triadimoveis?utm_medium=preview_link&utm_source=designer&utm_content=triadimoveis&preview=14d4c61c74938d45f07a3996dba9a5c9&workflow=preview)

1 Like
2

@Gabriel_Brasil did you ever find a solution?

I am having the same issue where query params are successfully pulled into the input / search field but the actual filtering doesn’t happen until I manually type or delete something from the input field.

3 

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      // Select the input element with attribute querysearch="true"
      const searchInput = document.querySelector('[querysearch="true"]');
      // Dispatch the input event to trigger the filter
      searchInput.dispatchEvent(new Event('input', { bubbles: true }));
    },
  ]);
</script>

Use above code and add attribute querysearch=“true”