在同一搜索框中搜索多个数组对象属性

Question

searchTerm: any;

search() {

      this.records = this.records.filter((res: any)=>{
        return res.name.toLocaleLowerCase().match(this.searchTerm.toLocaleLowerCase());
      });

  }

I am making the search term with name which is the property or key in records array. In the same search box I also want to search by age and course. How can I achieve this.

<input type ="text" placeholder="search" (input)=" search();" [(ngModel)]="searchTerm">

Answer 1

Just expand you're search filter to include your extra criteria:

search() {
      this.records = this.records.filter((res: any)=>{
        return (res.name && res.name.toLocaleLowerCase().match(this.searchTerm.toLocaleLowerCase())) || 
        (res.course && res.course.toLocaleLowerCase().match(this.searchTerm.toLocaleLowerCase())) || 
        (res.age && res.age.toLocaleLowerCase().match(this.searchTerm.toLocaleLowerCase())) ;
      });
  }

This assumes that both course and age are strings in the records array.

Answer 2

You can try using || operator with the same return statement as below :

this.records = this.records.filter((res: any)=>{
        return (res.name.toLocaleLowerCase().match(this.searchTerm.toLocaleLowerCase()) || res.age.match(this.searchTerm) || res.course.toLocaleLowerCase().match(this.searchTerm.toLocaleLowerCase()));
});

Answer 3

You could try to combine the conditions with or, for example like this.

search() {

      this.records = this.records.filter((res: any)=>{
        return (res.name.toLocaleLowerCase().match(this.searchTerm.toLocaleLowerCase() ||
            res.age.toLocaleLowerCase().match(this.searchTerm.toLocaleLowerCase() ||
            res.course.toLocaleLowerCase().match(this.searchTerm.toLocaleLowerCase());
      });

  }

Answer 4

Try:

search() {
    this.records = this.records.filter((res: any)=>{
      return Object.keys(res).some(item => {
        return item.toLocaleLowerCase().match(this.searchTerm.toLocaleLowerCase())
      });
    });
  }

This will search whatever property is in the object and check whether it's value matched the criteria. It will stop on the first match