Angularjs Filter search starting with given text

Question

I have got following html code:

  <p><input type="text" ng-model="test"></p>
  <ul>
   <li ng-repeat="x in names | filter:test">
    {{ x }}
   </li>
  </ul>

and corresponding JS is :

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Jabi',
        'Cabi',
        'Margareth',
        'Hege',
        'Joe',
        'Gustav',
        'Birgit',
        'Mary',
        'Kai'
    ];
});
</script>

the problem is when i type "bi" the filter returns me all the names containing "bi" however i want that filter should return only the names starting with "bi"(or watever is written in input textbox)

Possible duplicate of [Angular filter match by character?](https://stackoverflow.com/questions/31809551/angular-filter-match-by-character) — 4b0, Jan 31 '18 at 07:05

score 1 · Answer 1 · answered Jan 31 '18 at 07:05

Since you need only the matching case/letters you have to create a custom filter as follows,

DEMO

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Jabi',
        'Cabi',
        'Margareth',
        'Hege',
        'Joe',
        'Gustav',
        'Birgit',
        'Mary',
        'Kai'
    ];
    
$scope.onlyMatch = function (input, output) {
    var Str = (input + "").toLowerCase();
    return Str.indexOf(output.toLowerCase()) === 0;
}

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
  <ul>
   <li ng-repeat="x in names |  filter:test:onlyMatch">
    {{ x }}
   </li>
  </ul>
  </body>

this is not fulfilling my requirements . if i type "bi" i need only "Birgit" to be displayed . . .any help ? — Khan M, Jan 31 '18 at 07:23

Angularjs Filter search starting with given text

1 Answers1