How to use filter() and includes() with localeCompare for avoid accents

user_7550182 0
Viewed 461

I’m looking for a way to filter a table while avoiding accent problems.

let options = ['Hello', 'Hého', 'Heïho'];

filterOptions(filterValue) {
      this.filteredOptions = this.options.filter(
      option => option.includes( filterValue )
   )
 },

With the above function, when I search in options by writing the word "Heho", it doesn't return any results because I didn't put an accent.

I tried using this, but it doesn't work at all

filterOptions(filterValue) {
            this. filteredOptions = this. options.filter(
                option => option.includes( filterValue.localeCompare(option, undefined, { sensitivity: 'base' }) === 0 )
            )
        },

Do you know how I can filter my table avoiding accents?

vue.js javascript
2 Answers

Simply filter using the logic, (use undefined or 'en'). Problem with your code is, it is comparing if the array includes value true or false, based on what the localeCompare returns.

options.filter(o => o.localeCompare('Heho', undefined, { sensitivity: 'base' }) === 0)
user_120622180

Well, I found a simpler solution

filterOptions(filterValue) {
        this. filteredOptions = this. options.filter(
            option => option.toLowerCase().includes( filterValue.toLowerCase() ) 
        )
    },

I switch all the strings to lowercase for compare

user_75501820
Related