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.
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>
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.
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>
@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.
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
The logic only removes space from the beginning and end of the typed-in search not the spaces in between
We would actually add this as a feature request for future release
@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.
