Angularjs search and ignore spanish characters

Question

I am adding a simple view to the page. The idea is to search for products. These products are written in Spanish and have accents. For example: "Jamón".

Here is my code:

<div class="form-inline"> <label>Search</label> <input type="text" ng-model="q"/> </div> <div ng-repeat="product in products_filtered = (category.products | filter:q | orderBy:'name')"> .... </div> 

The only problem I have is that you need to type “Jamón” to find the product “Jamón”. I want to be more flexible if the user enters "Jamon", the results should include "Jamón".

How can I find angular filters and forget about accents? Any idea?

Thanks in advance.

Answer 1

You need to create a filter function (or a full filter). This is the simplest thing that could work:

HTML

 <div ng-app ng-controller="Ctrl"> <input type="text" ng-model="search"> <ul> <li ng-repeat="name in names | filter:ignoreAccents">{{ name }}</li> </ul> </div> 

Javascript

 function Ctrl($scope) { function removeAccents(value) { return value .replace(/á/g, 'a') .replace(/é/g, 'e') .replace(/í/g, 'i') .replace(/ó/g, 'o') .replace(/ú/g, 'u'); } $scope.ignoreAccents = function(item) { if (!$scope.search) return true; var text = removeAccents(item.toLowerCase()) var search = removeAccents($scope.search.toLowerCase()); return text.indexOf(search) > -1; }; $scope.names = ['Jamón', 'Andrés', 'Cristián', 'Fernán', 'Raúl', 'Agustín']; }; 

jsFiddle here .

Note that this only works for string arrays . If you want to filter the list of objects (and search in each property of each object, for example, Angular), you have to strengthen the filter function. I think this example should help you get started.

Answer 2

JavaScript has this function called localeCompare , where you can specify sensitivity = base , a parameter that allows you to consider á and a as equivalent, but it is not widely supported . I think that your only option is to create a filter function in which you normalize both lines manually (replacing ó with o , etc.) and compare the results.

Answer 3

Here is a slightly improved version (not counting the extra foreign characters that she is looking for, of course) above. I placed it directly in the controller, and this allowed me to search for all the data that I wanted to find. Thanks Bernardo for your contribution to this!

Hope this helps someone out.

  function removeAccents(value) { return value .replace(/á/g, 'a') .replace(/â/g, 'a') .replace(/é/g, 'e') .replace(/è/g, 'e') .replace(/ê/g, 'e') .replace(/í/g, 'i') .replace(/ï/g, 'i') .replace(/ì/g, 'i') .replace(/ó/g, 'o') .replace(/ô/g, 'o') .replace(/ú/g, 'u') .replace(/ü/g, 'u') .replace(/ç/g, 'c') .replace(/ß/g, 's'); } $scope.ignoreAccents = function (item) { if ($scope.search) { var search = removeAccents($scope.search).toLowerCase(); var find = removeAccents(item.name + ' ' + item.description+ ' ' + item.producer+ ' ' + item.region).toLowerCase(); return find.indexOf(search) > -1; } return true; }; 

Answer 4

The method suggested by @Michael Benford has a big drawback: it is a state filter. This practice is greatly discouraged by angular . In addition, this method does not work with deep arrays and objects.

I prefer to extend the standard angular filter:

HTML:

 <div ng-app ng-controller="Ctrl"> <input type="text" ng-model="search"> <ul> <li ng-repeat="person in people | filter: search : searchFn">{{ person.names }} {{ person.surnames }}</li> </ul> </div> 

JavaScript:

 function Ctrl($scope) { $scope.people = [{names: 'Jose', surnames: 'Benítez'}, {names: 'José María', surnames: 'Núñez Rico'}, {names: 'Rodrigo', surnames: 'Núñez'}]; $scope.searchFn = function(actual, expected) { if (angular.isObject(actual)) return false; function removeAccents(value) { return value.toString().replace(/á/g, 'a').replace(/é/g, 'e').replace(/í/g, 'i').replace(/ó/g, 'o').replace(/ú/g, 'u').replace(/ñ/g, 'n'); } actual = removeAccents(angular.lowercase('' + actual)); expected = removeAccents(angular.lowercase('' + expected)); return actual.indexOf(expected) !== -1; } } 

Answer 5

Check here to solve filters for the list of objects and search keywords in each property of each object. It also supports angular as a search, as well as searching with / without accent characters.

The following is a filter definition: -

  // ignore accents filter $scope.ignoreAccents = function (item) { if (!$scope.search) return true; var objects = []; var jsonstr = JSON.stringify(item); var parsejson = JSON.parse(jsonstr); var searchterm = $scope.search.replace(/[!#$%&'()*+,-./:; ?@ [\\\]_`{|}~]/g, ''); // skip replace if not required (it removes special characters) objects = getNoOfResults(parsejson, searchterm); return objects.length > 0; };