How to filter a list in vue with response ignoring accents and uppercase/lowercase?
I am making a filter of a list by name, it works, but if I have a registered name as Higor, the filter does not work when I write higor.
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)
}
}
3
Author: Victor Stafusa, 2018-08-26
2 answers
I made a Join of this answer How to do a search ignoring accentuation in JavaScript?, to normalize the accented text (removing the accents) and also putting the values all in low box, 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 haven't posted a minimal example of your code, it gets a little tricky to reflect on what was done, so this example can help you adapt in your code.
2
Author: novic, 2018-08-26 14:45:18
Thank you very much, it worked for me. It looked like this:
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)
}
0
Author: Mariana Dutra, 2018-08-30 21:57:03