CMS Filter Search

Attributes
1

Hi everyone,

I hope you all had a great weekend. I have a question: Is there a straightforward method to type non-accented words into the CMS filter search bar and still have items with accented/marcon words appear in the results?

For instance, if a user types “Maori” but the item in the CMS is listed as “Māori,” currently nothing shows up. This is just one example, as several different accented letters could pose similar results.

I hope this makes sense.

Cheers!

2

I solved it. :grinning: I duplicated the text block with accents/macrons in the CMS item. Then, I used the below code to replicate the text without the accents or macrons, making it searchable.

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Function to normalize text
  function normalizeText(text) {
    return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
  }

  // Find all elements with the 'iwi-text' field
  var iwiTextElements = document.querySelectorAll('[fs-cmsfilter-field="iwi"]');

  // Loop through each element and normalize its text
  iwiTextElements.forEach(function(element) {
    // Normalize the text
    var normalizedText = normalizeText(element.textContent);

      var resultElement = element.nextElementSibling; 
    if (resultElement && resultElement.getAttribute('fs-cmsfilter-field') === 'iwi') {
      resultElement.textContent = normalizedText;
    }
  });
});
</script>
2 Likes
3

Great to hear you solved this Marko!

This will no longer be a limitation for Filter v2 :wink:

4

Thanks @Marko , I was just checking to see whether FS had an official config approach for this. Do you see it working consistently, or do you see any intermittent failures?

@Support-Luis can you advise on the best practices to ensure that the normalizer code runs consistently after FS Load element creations, but before FS Filter is re-applied?

I remember we had a similar issue with CMS-driven event date-list generation, and making it accessible to FS Filter’s date-range filter while the user is navigating FS Load-paginated content.

5

Hey @memetican! By element creation do you mean rendering the items?

I think you could use the renderitems event and then programmatically apply the filters with filterInstance.applyFilters() after the normalizer code runs.

Let me know if I understood the question correctly :thinking:

6

Thanks @Support-Luis yes that’s what I was thinking- to make this comprehensive, both the query string and the content would need to be normalized. So as the user pages / scrolls and FS load creates new elements, those would need to run through the normalizer as well.

I’m familiar enough with the APIs to handle that but I wasn’t certain at what point FS Filter picks up the content from FS Load.

Here’s a more specific question- does FS Filter store the tagged content in its internal structures for filtering, or does it pull it live from the page ( including recent script changes to content ) at the point the filter is applied?

7

CMS Load and CMS Filter share the same listInstance property, so any change for the items should be picked up automatically for CMS Filter.

We do however have the storeFiltersData() for filterInstance.

  /**
   * Stores the data of all filters.
   * @returns The stored {@link FiltersData}.
   */
  storeFiltersData(): FilterData[];

Which should update the data if needed.

If you try this please let me know if it worked for your use case or if you need something else :muscle: