Angular JS 'Startswith' custom filter

Question

So I've been trying a while to make a custom filter that searches for the 'Startswith' parameters rather than the 'Contains'. Every filter that I've written haven't seem to work properly. Here is an example of what I'm trying to achieve ---> http://jsfiddle.net/DMSChris/9ptr9/

function FilterCtrl() {
var scope = this;
scope.doFilter = function(elem) { 
    if(!scope.searchText) return true;
    return elem.last_name.toLowerCase().indexOf( scope.searchText.toLowerCase()) == 0; 
};

}

http://jsbin.com/OyubElO/1/edit - Here is where I'm at right now.

  <ul border="1px" ng-repeat="msg in messages | filter:search:strict">

<li>{{msg.last_name}}</li>

Any help would be greatly appreciated!

If `elem.last_name` can be a long string, you may want to consider truncating and then comparing with `===` to the text to find — Paul S., Oct 21 '13 at 17:50

mark · Accepted Answer · 2014-11-15T00:28:09.343

34

A simple way to do this is to add a new method to your scope.

$scope.startsWith = function (actual, expected) {
    var lowerStr = (actual + "").toLowerCase();
    return lowerStr.indexOf(expected.toLowerCase()) === 0;
}

Then change the filter syntax on your element.

<ul border="1px" ng-repeat="msg in messages | filter:search:startsWith">

Here is a working plunkr with the example above.

edited Nov 15 '14 at 00:28

answered Mar 18 '14 at 00:24

mark

1,573
13
27

@Robin I've added a plunkr with the example. What didn't work for you? – mark Sep 18 '14 at 01:16
@mark plunkr doesn't seem to be there. But this worked for me!! – Shadow Nov 14 '14 at 18:38
@Shadow thanks for letting me know! I cleaned up my plunks and accidentally deleted that one. It's recreated now. – mark Nov 15 '14 at 00:28
@mark This working perfectly, i just can't understand what is expected variable needed for ? – abdoutelb Oct 05 '16 at 14:22
Extended question on this which formats the filtered result. Any help is highly appreciated! https://stackoverflow.com/questions/46728544/highlight-search-text-in-the-search-results-using-angularjs-filter – Sunny Oct 13 '17 at 11:40
1

Thanks Mark, Super solution. – Venkaiah Yepuri Jan 06 '18 at 09:35
HI Mark, this filter taking time when the array contains around 5000 values. So can you please suggest some better way to overcome this? thanks. – Venkaiah Yepuri Mar 02 '18 at 09:45
Thanks a lot. Its working perfectly inside ui-bootstrap type-head too. – Biby Cheriyan Apr 02 '18 at 06:49

score 3 · Answer 2 · answered Jun 05 '14 at 07:54

3

Filter in object

  $scope.fmyData = $filter('filter')($scope.AllMyData, $scope.filterOptions,function (actual, expected) {
                    return actual.toLowerCase().indexOf(expected.toLowerCase()) == 0;
                });

answered Jun 05 '14 at 07:54

user3454062

171
2
1

Hi @user35.. , any working plunker, please ? it really needs me.Thanks. – Venkaiah Yepuri Mar 02 '18 at 10:29

score 0 · Answer 3 · edited Apr 16 '18 at 08:46

0

Now pure javascript itself has the startsWith() method on strings. But it will not be supported by IE11.

See here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

edited Apr 16 '18 at 08:46

4b0

21,981
30
95
142

answered Apr 16 '18 at 08:45

vissu

1,921
7
37
52

Angular JS 'Startswith' custom filter

3 Answers3

Linked