How do I filter a list in Vue with response ignoring accents and uppercase/lowercase?

Question

I’m making a list filter by name, it works, but if I have a name registered as Gor, the filter does not work when I type.

  computed: {
    filtered: function () {
      const search = this.configs.search
      const users = _.orderBy(this.users, this.configs.orderBy, this.configs.order)

      if (_.isEmpty(search)) {
        return users;
      }

      return _.filter(users, user => user.name.indexOf(search) >= 0)
    }
  }

Answer 1

I made a junction of that answer How to do a search ignoring Javascript accent?, to normalize accented text (by removing accents) and also by lowering all values, and this resulted in a minimal example:

var vm = new Vue({
	el: '#app',
	data: {
		title: 'Pesquisa',
		items: [
			{id: 1, name:'Paul Lima'},
			{id: 2, name:'souza Cruz'},
			{id: 3, name:'Adael cruz'},
			{id: 4, name:'Pául lima'},
			{id: 5, name:'Pâul cruz'},
			{id: 6, name:'Sôuza Cruz'},
			{id: 6, name:'Cruz adael'}
		]
	},
	methods: {
	  nameFilter: function(item) {
		if (!this.searchText || this.searchText === '') {
			return true;
		}
		var n = this.prepareNameFilter(item.name);
		var s = this.prepareNameFilter(this.searchText);		      	
		return n.includes(s);
	  },
	  prepareNameFilter: function replaceSpecialChars(str)	{
		if (!str) return '';			    
		str = str.toLowerCase();
		str = str.replace(/[aáàãäâ]/,'a');
		str = str.replace(/[eéèëê]/,'e');
		str = str.replace(/[iíìïî]/,'i');
		str = str.replace(/[oóòõöô]/,'o');
		str = str.replace(/[uúùüû]/,'u');
		return str; 
	  }
	}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
<div id="app">
	{{title}}
	<br />
	<input type="text" v-model="searchText"/>
	<br />
	<ul>
		<li v-repeat="items | filterBy nameFilter">
			{{id}} {{name}}
		</li>
	</ul>
</div>

Since you didn’t post a minimal example of your code, it gets a little complicated to reflect on what was done, so this example can help you adapt in your code.

Answer 2

Thank you so much, it worked for me. It stayed that way:

    filtered: function () {
      const search = this.configs.search
      const users = _.orderBy(this.users, this.configs.orderBy, this.configs.order)

      if (_.isEmpty(search)) {
        return users
      }
      
      function replaceSpecialChars(str)	{
        if (!str) return ''
        str = str.toString()
        str = str.replace(/[aáàãäâ]/,'a')
        str = str.replace(/[eéèëê]/,'e')
        str = str.replace(/[iíìïî]/,'i')
        str = str.replace(/[oóòõöô]/,'o')
        str = str.replace(/[uúùüû]/,'u')
        return str 
      }

      return _.filter(users, user => replaceSpecialChars(user.name.toLowerCase()).indexOf(search.toLowerCase()) >= 0)

    }