CODEWITHSUNDEEP
javascriptarraysangularjsfilterecmascript-6
Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

Custom filter for short and full name in angularjs

I want to create a filter that could filter by short name and full name

I have done it by full name 

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Indian Overseas Bank',
        'Housing Development Finance Corporation',
        'Industrial Credit and Investment Corporation of India',
        'Indian Bank',
        'City Bank',
        'City Union Bank',
        'Kotak Mahindra Bank',
        'Tamilnadu Mercantile Bank ',
        'State Bank Of India'
    ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>

<div ng-app="myApp" ng-controller="namesCtrl">

<p>Type a letter in the input field:</p>

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test">
    {{ x }}
  </li>
</ul>

</div>

But I am not sure, how can I filter by short name like IOB, HDFC, SBI?

I want to the result to be like

Filter word     : Expected result 

IOB             : Indian Overseas Bank 
HDFC            : Housing Development Finance Corporation
SBI             : Stete Bank of India
ICICI           : Industrial Credit and Investment Corporation of India'

Note : Those banks are Indian banks. See, when I do filtering by SBI and ICICI then filter won't recognize of, and words.

Also if I am typing normal word like india, then I am expecting the results to be filtered by india same as I have done in the snippet . How could do this?

Upvotes: 0

Views: 335

Answers (1)

Aleksey Solovey
Aleksey Solovey

Reputation: 4191

Clearly you need a custom filter. Your job is to break words into abbreviations. Then you can simply match the model to your abbreviations as a normal filter would, I suggest .indexOf() method.

Here is my simple demo:

var app = angular.module('myApp', []);
app.filter('myFilter', function() {
  return function(inp, model) {
    if (!model) {
      return inp;
    }
    var ignore = ["of", "and", "Of", "And"];
    var array = [];
    for (var i = 0; i < inp.length; i++) {
      var str = "";
      var arr = inp[i].split(" ");
      for (var j = 0; j < arr.length; j++) {
        if (ignore.indexOf(arr[j]) == -1) {
          str += arr[j][0];
        }
      }
      // str = str.toLowerCase();
      // model = model.toLowerCase();
      if (str.indexOf(model) != -1) {
        array.push(inp[i]);
      }
    }
    return array;
  };
});
app.controller('namesCtrl', function($scope) {
  $scope.names = [
    'Indian Overseas Bank',
    'Housing Development Finance Corporation',
    'Industrial Credit and Investment Corporation of India',
    'Indian Bank',
    'City Bank',
    'City Union Bank',
    'Kotak Mahindra Bank',
    'Tamilnadu Mercantile Bank ',
    'State Bank Of India'
  ];
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="namesCtrl">

    <p>Type a letter in the input field:</p>

    <p><input type="text" ng-model="test"></p>

    <ul>
      <li ng-repeat="x in names | myFilter:test">
        {{ x }}
      </li>
    </ul>

  </div>

</body>

</html>

(The example is case sensitive)

Upvotes: 3

Related Questions