Remove trailing space at end of the search field (often due to phone auto-complete) when using Finsweet's CMS Filter

Required: This cloneable was made to work with Finsweet's CMS Filter (Thanks to Finsweet Pro support to finalize)

Example Issue: When using autocomplete, an additional space may be added at the end of your selection which can result in zero results. Most users don't realize or think about there being an added space and will assume no results just as displayed.

Solution: This cloneable offers Javascript that performs the following:

  1. Adds an event listener to the search field.
  2. Sets a timeout of 3 second to allow for delay in user typing (feel free to adjust this)
  3. Checks if the search results are empty.
  4. If the search results are empty, checks if the last character of the search input is a space.
  5. If the last character of the search input is a space, removes the space.
  6. Triggers the search input event.

To test, you can either load this page on your phone and type "phon" and proceed to select the auto-complete "phone" to see if your device adds a space at the end of your desired search string. Otherwise, on enter 'phone " into the search field below (including the trailing space). Then wait 3 second for it to be corrected.

When setting up ensure you use attribute cms=item on the collection item element.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

No results.

Exercitationem Sapiente Sed Deleniti
Fugiat Ea Est
Voluptate Ea
Architecto Nobis
Rerum Tenetur Phone
Placeat Ducimus
Aut Et
Et Facere Deleniti
Reiciendis Aut Consequatur Laboriosam
Distinctio Tempore Omnis Quod
Placeat Magnam Dolorem Accusamus
Rem Inventore Iusto
Vero Consequatur Reprehenderit