Disabling Instant Filtering in CMS Filter - Trigger with Enter Key Only

Attributes
,
1

Hey there!

I have a question about the CMS filter attributes. I’m setting up a search function using a single text input field for location searches. I want to disable the default instant filtering so that the filtering happens only after the user presses Enter. There’s no visible submit button; it’s all about keeping the design clean and minimal.

Is there a way to set up the filtering so it only triggers on an Enter keypress without showing a submit button? Any guidance or examples would be really helpful.

Thanks!

2

Hey @juicydisorder! We may be able to achieve this with some JS. Can you share a link?

3

This would be great! I would send you the link in private

4

@Support-Luis is there a chance of posting this JS here?

5

Hey @avivtech! The JS needed depends on the setup. @juicydisorder had written some code, and I just added this

  const input = document.querySelector('[fs-cmsfilter-field="plz"]');

  input.addEventListener('input', (e) => {
    e.preventDefault();
  });

  // add event listener to submit button
  submitButton.addEventListener('click', () => {
    console.log('submit button clicked');
    filterInstance.applyFilters(); // this line triggers the filtering
  });

You can share a link, and I’ll adjust the code to suit your setup :wink:

1 Like
6

Hey @Support-Luis , could you please put together a code for the same setup for me? [here] is the read-only for the project.

many many thanks!

7

Hey @de.skaaa! Absolutely! Here is the snippet adjusted to your project!

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

      const [filterInstance] = filterInstances;
      const { submitButton } = filterInstance;

      const input = document.querySelector('[fs-cmsfilter-field="*"]');
      console.log(input);

      input.addEventListener('input', (e) => {
        e.preventDefault();
      });

      // add event listener to submit button
      submitButton.addEventListener('click', () => {
        console.log('submit button clicked');
        filterInstance.applyFilters(); // this line triggers the filtering
      });
    },
  ]);
</script>
1 Like