Critical Developers

Programmers Knowledge Base

AngularJS search and ignore accents characters filter

Many of us have requirement to ignore the accents while doing search and also we spends time in days. So, here I will explain you how to maintain angularjs default search as well as ignoring accents characters.
And but obvious to ignore accents we need a custom filter.

Please follow the below steps to achieve same:-

Scripts:-  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-messages.min.js"></script>
    <script src="lib/removeAccents.js"></script>    <!-- any plugin which can remove accents characters to normal ASCII characters-->
    <script type="text/javascript">

            var app = angular.module('myApp', ["ngRoute"]);
            app.controller('myController', myController);

            // Controller definition
            function myController($scope) {

                // get no of matched records
                function getNoOfResults(obj, val) {
                    var objects = [];
                    for (var i in obj) {
                        if (!obj.hasOwnProperty(i)) continue;
                        if (typeof obj[i] == 'object') {
                            objects = objects.concat(getNoOfResults(obj[i], val));
                        } else if (obj[i] != null) {
                            //console.log(obj[i].toString().toLowerCase());
                            if (removeAccents(obj[i].toString().toLowerCase()).indexOf(removeAccents(val.toLowerCase())) > -1) {
                                objects.push(i);
                            }
                        }
                    }
                    return objects;
                }

                // 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;
                };

                // sample json
                $scope.customers = [{
                    "name": "M├írcio",
                    "age": 25,
                    "address": {
                        "streetAddress": "21 2nd Street",
                        "city": "New York",
                        "state": "NY",
                        "postalCode": "10021"
                    },
                    "phoneNumber": [{
                        "type": "home",
                        "number": "212 555-1234"
                    },
                        {
                            "type": "fax",
                            "number": "646 555-4567"
                        }
                    ]
                }, {
                    "name": "Franco",
                    "age": 42,
                    "address": {
                        "streetAddress": "JM Street",
                        "city": "Boston",
                        "state": "MS",
                        "postalCode": "10023"
                    },
                    "phoneNumber": [{
                        "type": "home",
                        "number": "787 555-4566"
                    },
                        {
                            "type": "fax",
                            "number": "5676767656"
                        }
                    ]
                }];
                // end json
            };  // end controller function
    </script>

HTML:-  
 <div ng-app="myApp" ng-controller="myController">
        <input type="text" ng-model="search" placeholder="Search keywords">
        <br />
        <br />
        <table id="tblCustomers" border="1" width="200">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="cust in customers | filter:ignoreAccents">
                    <td> {{ cust.name }} </td>
                    <td> {{ cust.age }} </td>
                </tr>
            </tbody>
        </table>
    </div>


For demo click here

Download from here

Thats it! you are set to run :)

Loading