Angular filter match by character?

Question

I have angular 1.3, and i have the following array:

     data : [
        {
           id :2,
           name : "danny davids",
           age :9

        },
{
           id :3,
           name : "sanny gordon",
           age :9

        }
     ]

I want the filter to do the follwing:

When i start writing the word "s", i want the danny davids to disappear, right now the default behavior is, both of them are still shown (the s is in the end of the last name of danny).

strict mode is something that i dont want to use, the behavior i want is:

if there is no value in the input, i want to see all, if i start to write i want to see the exact one by firstName/lastName.

is there a default filter for this in angular 1.3?

i want the filter to do so with first/last name basis, meaning, if s is in the first name of the user (or last name of the user), than show it to me — totothegreat
– totothegreat, Commented Aug 4, 2015 at 12:41
write a custom $filter function that selects only those objects. — ryanyuyu
– ryanyuyu, Commented Aug 4, 2015 at 12:44

Majedur · Accepted Answer · 2018-12-03 09:30:07Z

4

You can filter match by any characters:

Sample condition:

yourDataList.display.toLowerCase().indexOf(searchData) !== -1;

Example:

 function createFilterForAnycharacters(searchData) {
        var lowercaseQuery = query.toLowerCase();
        return function filterFn(yourDataList) {
            return (yourDataList.display.toLowerCase().indexOf(searchData) !== -1);
        };
    }

answered Dec 3, 2018 at 9:30

Majedur

3,2523 gold badges34 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ryanyuyu · Accepted Answer · 2015-08-04 13:17:10Z

I suggest using $filter by a custom filter function for you ng-repeat. According to the documentation, $filter expects

function(value, index, array): A predicate function can be used to write arbitrary filters. The function is called for each element of the array, with the element, its index, and the entire array itself as arguments.

And only elements that return true with be shown. So all you have to do is write that function.

Your filter function might look like this:

$scope.filterData = function (obj) {
  return anyNameStartsWith(obj.name, $scope.searchFilter);
};

function anyNameStartsWith (fullname, search) {

  //validate if name is null or not a string if needed
  if (search === '')
    return true;

  var delimeterRegex = /[ _-]+/;
  //split the fullname into individual names
  var names = fullname.split(delimeterRegex);

  //do any of the names in the array start with the search string
  return names.some(function(name) {
      return name.toLowerCase().indexOf(search.toLowerCase()) === 0;
  });
}

Your HTML might look something like this:

<input type="text" ng-model="searchFilter" />
<div ng-repeat="obj in data | filter : filterData">
    Id: {{obj.id}}
    Name: {{obj.name}}
</div>

A demo via plnkr

This is great answer and helped me to get near the result I want, but in your plnkr if I enter "sam dar" in the search I would expect to see "samantha darcy" do you have any idea on how to achieve that? I've been trying to solve it for hours!
@AdrianE.LabastidaCañizares that will take a bit more string processing. That's probably a big enough change that you could ask a new question. You can link to this question and answer for context. As a start, you'll probably have to modify the filtering function to split both the name and the search text.

Bugs · Accepted Answer · 2017-01-05 17:02:13Z

3

Use this custom filter to get result match starting characters

app.filter('startsWithLetter', function () {
    return function (items, letter) {
        var filtered = [];
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (item.substr(0,letter.length).toLowerCase() == letter.toLowerCase()) {
                filtered.push(item);
            }
        }
        return filtered;
    };
});

edited Jan 5, 2017 at 17:02

Bugs

4,4799 gold badges34 silver badges41 bronze badges

answered Jan 5, 2017 at 16:16

Manoj Kumar Singh

292 bronze badges

Comments

Girdhar Singh Rathore · Accepted Answer · 2015-08-04 13:17:12Z

it works for your scenario, you can create custom filter

below is html code

<div ng-app="app">
    <div ng-controller="PersonCtrl as person">
        <input type="text" ng-model="letter" placeholder="Enter a letter to filter">
        <ul>
           <li ng-repeat="a in person.data | startsWithLetter:letter"> 
                {{a.name}}
            </li> 
        </ul>
    </div>
</div>

js code

var app = angular.module('app', []);

app.filter('startsWithLetter', function () {
    return function (items, letter) {
        var filtered = [];
        var letterMatch = new RegExp(letter, 'i');
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (letterMatch.test(item.name.substring(0, 1))) {
                filtered.push(item);
            }
        }
        return filtered;
    };
});

app.controller('PersonCtrl', function () {

    this.data = [
        {
           id :2,
           name : "danny davids",
           age :9

        },
        {    
           id :3,
           name : "sanny gordon",
           age :9

        }
     ]

});

This is very very close to what i need, i dont need the first letter only, i need the all follow up word, if i write sa i want to see sanny

Karthikvenkat86 · Accepted Answer · 2015-08-04 12:51:56Z

0

Need to create a custom filter function to do this. There is no default method to match first character in angular.

https://docs.angularjs.org/guide/filter

answered Aug 4, 2015 at 12:51

Karthikvenkat86

848 bronze badges

Collectives™ on Stack Overflow

Angular filter match by character?

5 Answers 5

Comments

2 Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

1 Comment

Comments

Linked

Related