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