Last active
July 5, 2018 02:19
-
-
Save vinaygopinath/8b61bdf5c561be3acd7b to your computer and use it in GitHub Desktop.
Custom Angular search filter that matches the search query against a combination of multiple properties
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
| <!DOCTYPE html> | |
| <html ng-app="CustomSearchDemo"> | |
| <!-- Plunker: http://plnkr.co/edit/8qagvK --> | |
| <head> | |
| <link rel="stylesheet" href="style.css"/> | |
| </head> | |
| <body ng-controller="DemoCtrl"> | |
| <div> | |
| <label>Search</label> | |
| <input type="text" ng-model="queryStr" ng-model-options="{ debounce: 400}"> | |
| <pre>Showing {{ results.length}} out of {{personArr.length}} persons</pre> | |
| </div> | |
| <div ng-repeat = "person in personArr | filter:searchFunc as results" class="card"> | |
| <h3>{{person.firstName}} {{person.lastName}}</h3> | |
| <p>Phone number: {{person.phoneNum}}</p> | |
| <p>Email: {{person.email}}</p> | |
| </div> | |
| <script src="https://code.angularjs.org/1.3.10/angular.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
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('CustomSearchDemo', []) | |
| .controller('DemoCtrl', function($scope) { | |
| $scope.personArr = [ | |
| { | |
| firstName: "Jane", | |
| lastName: "Doe", | |
| phoneNum: "555 1234", | |
| email: "[email protected]" | |
| }, | |
| { | |
| firstName: "Jane", | |
| lastName: "Smith", | |
| phoneNum: "555 5678", | |
| email: "[email protected]" | |
| }, | |
| { | |
| firstName: "John", | |
| lastName: "Doe", | |
| phoneNum: "987 6543", | |
| email: "[email protected]" | |
| }, | |
| { | |
| firstName: "Oscar", | |
| lastName: "Wilde", | |
| phoneNum: "112 2334", | |
| email: "[email protected]" | |
| } | |
| ]; | |
| // This function is called for each item in the array to be filtered | |
| $scope.searchFunc = function(item) { | |
| //Convert the item into JSON string | |
| var jsonStr = angular.lowercase(JSON.stringify(item)); | |
| // Check if the search query is not empty | |
| if ( $scope.queryStr && $scope.queryStr.trim() ) { | |
| // The query may have multiple parts separated by space, so split them | |
| var query = $scope.queryStr.trim().split(" "); | |
| // Assume that the current item is a valid result | |
| var result = true; | |
| // Iterate over the parts of the search query | |
| for ( var partIndex in query ) { | |
| // Check if the JSON string contains the current query part | |
| if ( jsonStr.indexOf(angular.lowercase(query[partIndex])) > -1 ) { | |
| // Let this item feature in the result set only if other parts of the | |
| // query have been found too | |
| result = result && true; | |
| } | |
| else { | |
| // Even if a single part of the query was not found, this item | |
| // should not feature in the results | |
| result = false; | |
| } | |
| } | |
| return result; | |
| } | |
| // The search queryStr is empty, so there's no need for filtering | |
| // return true for all items | |
| else { | |
| return true; | |
| } | |
| }; | |
| }); |
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
| .card { | |
| margin: 10px 3px; | |
| padding: 3px 5px; | |
| background-color: #f1f1f1; | |
| -webkit-box-shadow: 4px 4px 3px 0px rgba(50, 57, 50, 0.83); | |
| -moz-box-shadow: 4px 4px 3px 0px rgba(50, 57, 50, 0.83); | |
| box-shadow: 4px 4px 3px 0px rgba(50, 57, 50, 0.83); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment