Trim space in the last of input field and show Filter results based on that

Attributes
1

I have Filters setup with Finsweet Attributes which also contains a search bar but currently, we show result based on the exact input string but the client have a requirement that if we have a space" " in the last of the input field then we should still show results without considering last blank space. So e.g If a user has searched "Global Warning " then we should show the result based on “Global Warning” by trimming extra spaces in the last.

2

Hello @hello10, you can use this script to trim your text

<script>
    window.fsAttributes = window.fsAttributes || [];
    window.fsAttributes.push([
      'cmsfilter',
      (filterInstances) => {
        const searchField = document.querySelector('[search="field"]');
        searchField.addEventListener('input', () => {
          const searchedText = searchField.value;
          const trimedSearchText = searchedText.trim();
          searchField.value = trimedSearchText;
          searchField.dispatchEvent(new Event('input', { bubbles: true }));
        });
      },
    ]);
</script>
3

Thanks @josephmukunga, With the above script It’s not allowing me to add any space in the text field. As soon as I add "Global " it trims it to “Global”. I can add any word after space. I want the value that goes to check the result should be without the extra Space.

4

I see what you mean

Use this script instead

<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsfilter',
  (filterInstances) => {
    const searchField = document.querySelector('[search="field"]');
    let debounceTimer;

    searchField.addEventListener('input', () => {
      clearTimeout(debounceTimer);

      debounceTimer = setTimeout(() => {
        const searchedText = searchField.value;
        const trimmedSearchText = searchedText.trim();
        searchField.value = trimmedSearchText;
        searchField.dispatchEvent(new Event('input', { bubbles: true }));
      }, 800);
    });
  },
]);
</script>
5

@josephmukunga Now script removes the space after 800ms, I don’t want to remove the space from input field that is visible. I just want value with which we search should go without space.
Can we do something like having 2 input fields one is hidden and one is main visible field. We’ll mirror the input but without the space in the last. I want to achieve mirror attribute effect but by remove last spacing from the value.

6

The 800ms is to allow user to continue typing the 2nd word. That’s the only viable solution. Otherwise we’ll need to rewrite the filter script attribute

7

The logic only removes space from the beginning and end of the typed-in search not the spaces in between

8

We would actually add this as a feature request for future release

9

@josephmukunga I understand but for now, as a workaround can we mirror input in 2nd Field just like we have mirror attribute but with a trimmed output? Would really appreciate it if we can achieve this.

10

We can mirror the text but we’ll still face the same issue as trimming happens as the user types.

Actually, a better solution would be to add the SUBMIT BUTTON option. This will enable us to only trim the text only when the submit button is pressed

image
image1716×892 78 KB