Filter multiple cms collections without cms combine

Hello, Im trying to do a workaround where I would use one filter and it would apply to multiple cms collections. I know we can use cms combine but I would like this layout with multiple titles. Maybe if I use multiple mirror input values to filter the other cms collections it might work? if there is any other workaround or this would be the ideal way please let me know. thanks in advance!

Hey @stevenjhilario The only way for this would be to use a unique form for each list, and mirror clicks and inputs.

Here is the basic setup on a clonable project! Filter + Mirror Click

1 Like

@Support-Luis as shown in the image below both inputs work fine independently, when I use mirror input attribute it does not mirror it.

@stevenjhilario can you share a link?

https://preview.webflow.com/preview/hc-travel-nursing?utm_medium=preview_link&utm_source=designer&utm_content=hc-travel-nursing&preview=a6ce89561704957978845f54674eb6b5&pageId=656d0a64b9eb7c642a4eb4ab&workflow=preview

@stevenjhilario you are missing the Attribute’s script :slight_smile:

I’ll post it below.

<!-- [Attributes by Finsweet] Mirror input values -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-mirrorinput@1/mirrorinput.js"></script>

Off course! I could of swore I pasted that in! is it possible to mirror an input value from one input to two inputs?

I used javascript to mirror the last input, thanks again!

1 Like

@Support-Luis one last thing, the last input is mirrored but the filter dont work, if I type in the input it works fine. how can I fix this?

hey @stevenjhilario you can use the same target value for the third field. If you want to keep the JS solution dispatch a new event for each input to simulate a user typing.

@Support-Luis I tried using the same target but nothing happens

Interesting, Mirror Click Events does work this way.

Since you still have the code in the page, this will achieve the same result

<script>
  window.onload = () => {
    document.getElementById('sourceField').addEventListener('input', function () {
      let sourceValue = this.value;

      const thirdInput = document.getElementById('targetField');
      thirdInput.value = sourceValue;
      thirdInput.dispatchEvent(new Event('input', { bubbles: true }));
    });
  };
</script>

Thanks this worked!

1 Like