A filter for angular where you pass a list of javascript objects and a string with the term to be searched, then this filter search all terms in all objects attributes.
There is a example.html with this filter working and a demo:
Created
July 29, 2019 19:47
-
-
Save mariohmol/dbf208aae811a6c10c2158d290cc11b9 to your computer and use it in GitHub Desktop.
angular-filter-ignoreaccents
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('Appfilters', []).filter('accentsFilter', [function () { | |
| return function (list, term) { | |
| var Normalize = function (string) { | |
| if(string==null || string==undefined) return ""; | |
| // apply toLowerCase() function | |
| string = string.toLowerCase(); | |
| // specified letters for replace | |
| var from = "àáäâèéëêěìíïîòóöôùúüûñçčřšýžďť"; | |
| var to = "aaaaeeeeeiiiioooouuuunccrsyzdt"; | |
| // replace each special letter | |
| for (var i = 0; i < from.length; i++) | |
| string = string.replace(new RegExp(from.charAt(i), "g"), to.charAt(i)); | |
| // return normalized string | |
| return string; | |
| }; | |
| //var termNormal = Normalize(term); | |
| var termNormal = Normalize(term); | |
| var terms = termNormal.split(" "); | |
| var found=false; | |
| var results = []; | |
| if (!angular.isUndefined(list) && !angular.isUndefined(term) && term.length > 0) { | |
| angular.forEach(list, function (listitem, listkey) { | |
| found=false; | |
| angular.forEach(listitem, function (itemvalue, itemkey) { | |
| if(found || typeof(itemvalue)!="string") return; | |
| var itemvalueNormal = Normalize(itemvalue); | |
| angular.forEach(terms, function (id) { | |
| if(found || id=="" || id==null) return; | |
| if (itemvalueNormal.indexOf(id) != -1){ | |
| results.push(listitem); | |
| found=true; | |
| return; | |
| } | |
| }); | |
| }); | |
| }); | |
| return results; | |
| } else { | |
| return list; | |
| } | |
| }; | |
| }]); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html><head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| <meta name="robots" content="noindex, nofollow"> | |
| <meta name="googlebot" content="noindex, nofollow"> | |
| <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js"></script><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak{display:none;}ng\:form{display:block;}</style> | |
| <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | |
| <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script> | |
| <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css"> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular-resource.js"></script> | |
| <script type="text/javascript" src="https://rawgithub.com/mariohmol/angular-filter-ignoreaccents/master/accentsFilter.js"></script> | |
| <title>AngularJS: Simple Accents Filter</title> | |
| <script type="text/javascript">//<![CDATA[ | |
| 'use strict'; | |
| var App = angular.module('clientApp', ['ngResource', 'Appfilters']); | |
| App.controller('ClientCtrl', ['$scope', function ($scope) { | |
| $scope.selectedCompany = []; | |
| $scope.clients = [{ | |
| name: 'Brett', | |
| designation: 'Software Engineer', | |
| company: { | |
| id: 1, | |
| name: 'Apple' | |
| } | |
| }, { | |
| name: 'Steven', | |
| designation: 'Database Administrator', | |
| company: { | |
| id: 3, | |
| name: 'Google' | |
| } | |
| }, { | |
| name: 'Jim', | |
| designation: 'Designer', | |
| company: { | |
| id: 2, | |
| name: 'Facebook' | |
| } | |
| }, { | |
| name: 'Michael', | |
| designation: 'Front-End Developer', | |
| company: { | |
| id: 1, | |
| name: 'Apple' | |
| } | |
| }, { | |
| name: 'Josh', | |
| designation: 'Network Engineer', | |
| company: { | |
| id: 3, | |
| name: 'Google' | |
| } | |
| }, { | |
| name: 'Ellie', | |
| designation: 'Internet Marketing Engineer', | |
| company: { | |
| id: 1, | |
| name: 'Apple' | |
| } | |
| }]; | |
| }]); | |
| //]]> | |
| </script> | |
| </head> | |
| <body data-ng-app="clientApp" class="ng-scope"> | |
| <div data-ng-controller="ClientCtrl"> | |
| <ul class="inline"> | |
| <li> | |
| <div class="alert alert-info"> | |
| <h4>Total Filtered Client: {{filtered.length}}</h4> | |
| <input type="text" ng-model="search" class="form-control" /> | |
| </div> | |
| </li> | |
| </ul> | |
| <hr/> | |
| <h3>Clients Table:</h3> | |
| <table class="table table-hover table-striped"> | |
| <thead> | |
| <tr> | |
| <th style="width:10%">#</th> | |
| <th style="width:20%">Name</th> | |
| <th style="width:40%">Designation</th> | |
| <th style="width:30%">Company</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr data-ng-repeat="client in filtered = (clients | accentsFilter:search)"> | |
| <td>{{$index + 1}}</td> | |
| <td><em>{{client.name}}</em> | |
| </td> | |
| <td>{{client.designation}}</td> | |
| <td>{{client.company.name}}</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <!-- <pre>{{selectedCompany|json}}</pre> | |
| <pre>{{companyList|json}}</pre> | |
| <pre>{{clients|json}}</pre> | |
| --> | |
| </div> | |
| </body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment