Search pipe for Angular2

Question

I am working on some project and i can't find the right answer for my search pipe. This is my code:

import {Pipe} from '@angular/core';

@Pipe({
  name: 'SearchPipe'
})

export class SearchPipe {


 transform (value, [queryString]) {
    if (value==null) {
      return null;
    }
    if (value=="") {
      return null;
    }

    if(queryString !== undefined){
        return   value.filter(item=>item.model.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)         ;
    }else{
        return value;
    }
  }
}

And i get all search result that contain letter A when i enter that in search. I need to search my json with word not with letter. Sorry for my bad language, i hope you will understand it. This is the JSON.

[
  {

    "brand": "Suzuki",
    "condition": "polovno",
    "salesman": "Automotive",
    "model": "Vitara"
  }
]

If someone can modify code i would be very happy. Thanks in advance!

score 2 · Answer 1 · answered Jun 26 '16 at 18:22

2

You don't need the brackets around the queryString parameter. You can pass that in via a parameterized pipe (e.g. SearchPipe:queryString).

Here's a plunker example.

answered Jun 26 '16 at 18:22

mifish

314
2
5

score 1 · Answer 2 · edited May 23 '17 at 12:25

1

I've created a plunker based off of answers HERE.

Additionally I had to add an @Input, @ViewChild, and ElementRef of the <input> and create and subscribe() to an observable of it.

Angular2 Search Filter: PLUNKR

edited May 23 '17 at 12:25

Community

1
1

answered Dec 25 '16 at 03:00

Nate May

3,814
7
33
86

score 0 · Answer 3 · edited Mar 03 '17 at 00:20

Not sure about the filter logic you have but try this out if it woks

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'SearchPipe'
})

export class SearchPipe implements PipeTransform{


 transform (value, [queryString]) {
    if (value==null || value=="") {
      return null;
    }

    if(queryString !== undefined){
        return   value.filter(item=>item.model.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)         ;
    }else{
        return value;
    }
  }
}

Search pipe for Angular2

3 Answers3