AngularJs Search Function Case Insensitive

Question

In below example when i search by 'swa' string I'll get 'swap-dhule-21' row and when i search by 'Swa' I'll get 'Swati-jamner-67' row.I have put
my code over here for reference for problem understanding.

I have write search function.here I want case insensitive search
when i search by either 'swa' or 'Swa' I should get both
row i.e 'swap-dhule-21' and 'Swati-jamner-67'.

<!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
            <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
            <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
            <link rel="stylesheet" href="style.css" />
            <script src="script.js"></script>
        </head>
        <body ng-app="myModule" ng-controller="myController">
            <input type="text" class="form-control" placeholder="Filter..." ng-model="query">
            <table>
                <tr>
                    <th>
                        <input id="all" class="styled" type="checkbox" ng-model="allSelected" ng-model-options="{getterSetter: true}"/>
                    </th>
                    <th class="col-sm-2">First Name</th>
                    <th class="col-sm-2">Last Name</th>
                    <th class="col-sm-4">Email Id</th>
                </tr>

                <tr ng-repeat="item in filterData = (totalItems| filter : search) | limitTo:10:10*(page-1)">
                    <td><input id="member1" class="styled" type="checkbox" ng-model="item.Selected"></td>
                    <td class="col-sm-2 text-center">{{item.itemName}}</td>
                    <td class="col-sm-2 text-center">{{item.itemcity}}</td>
                    <td class="col-sm-4 text-center">{{item.quantity}}</td>
                </tr>
            </table>
        <uib-pagination max-size="maxSize"  boundary-links="true" class="pagination-sm pagination" total-items="filterData.length" ng-model="page"
                        ng-change="pageChanged()" previous-text="&lsaquo;" next-text="&rsaquo;" items-per-page=10></uib-pagination>
    </body>


    <script>
        // Code goes here
        var myModule = angular.module('myModule', ["ui.bootstrap"]);
        myModule.controller('myController', function($scope) {
        $scope.page = 1;
        $scope.totalItems = [ {itemName: "Tom", itemcity: "pune", quantity : "11"},
        {itemName: "swap", itemcity: "dhule", quantity : "21"},
        {itemName: "ravi", itemcity: "chalis", quantity : "33"},
        {itemName: "rajan", itemcity: "akola", quantity : "54"},
        {itemName: "Swati", itemcity: "jamner", quantity : "67"},
        {itemName: "Tushar", itemcity: "nashik", quantity : "87"},
        {itemName: "pratik", itemcity: "mumbai", quantity : "98"},
        {itemName: "dfds", itemcity: "mumbai", quantity : "82"},
        {itemName: "jfghj", itemcity: "mumbai", quantity : "79"},
        {itemName: "fg", itemcity: "mumbai", quantity : "100"},
        {itemName: "fdgf", itemcity: "mumbai", quantity : "51"}
        ];
        $scope.displayItems = $scope.totalItems.slice(0, 10);
        $scope.pageChanged = function() {
        var startPos = ($scope.page - 1) * 10;
        //$scope.displayItems = $scope.totalItems.slice(startPos, startPos + 3);
        console.log($scope.page);
        };
        $scope.search = function (row) {
        return !!((row.itemcity.indexOf($scope.query || '') !== - 1 || row.quantity.indexOf($scope.query || '') !== - 1));
        };
        });
    </script>
    </html>

This may help: http://stackoverflow.com/questions/18082017/angularjs-filter-case-insensitive — neptune, May 15 '17 at 14:36
Besides the use of `.toLowerCase()` you also need to fix your `$scope.search()` function. When a filter is invoked the entire collection is passed to the filter, but you have written your filter as if it gets one row at a time. Inside your `$scope.search()` function the values of `row.itemcity` and `row.quantity` will **always** be `undefined`. — Lex, May 15 '17 at 15:15
Hello @neptune, please understand my problem statement. As per your link it should not complete my requirement.simply when i search for 'swa' it willl work but when i search for 'Swa' it should not work. — Swap.Y, May 16 '17 at 06:14

score 1 · Answer 1 · answered May 15 '17 at 15:22

You can convert everything to upperCase or lowerCase in order to achieve a case insensitive search

$scope.search = function (row) {
        return !!((row.itemcity.toUpperCase().indexOf($scope.query.toUpperCase() || '') !== - 1 || row.quantity.indexOf($scope.query || '') !== - 1));
        };

score 0 · Answer 2 · edited May 23 '17 at 10:31

The String.indexOf() function is case sensitive. See the MDN documentation for more information.

You could adapt your test function to use a regex that is case insensitive:

var someRegex = /hello/i;
someRegex('Hello').test(); //true

However the angular way is to apply a filter to an object property, I think this SO answer might help: How to filter by object property in angularJS

edit: almost forgot, if you are looking for a fast fix you can lowercase both the test and the string to search before doing the comparison. row.itemcity.toLowerCase().indexOf($scope.query.toLowerCase()...).

AngularJs Search Function Case Insensitive

2 Answers2