Angular2 Auto suggester

Question

I have been searching a lot on INTERNET but still unable to figure out how i can make custom auto suggester without any third party. After a lot of google I found this

but the issue is that my response from api is a bit different i am getting response as :

[{"id":"1","name":"aa"},{"id":"2","name":"bb"}...]

due to which i am getting [object][object] as value in pipe.

Can anyone please help how i can handle this request with this pipe. I want that their should be a text box on whose click there should be listing and on user input the below suggestions may vary.

Pipe:

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

@Pipe({
name: 'FilterPipe',
})
export class FilterPipe implements PipeTransform {
transform(value: any, input: string) {
    if (input) {
        input = input.toLowerCase();
        return value.filter(function (el: any) {
            return el.toLowerCase().indexOf(input) > -1;
        })
    }
    return value;
}
}

in ts:

import { Component } from '@angular/core';
import {FilterPipe} from './pipes'

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
 })
  export class AppComponent {
 title:String;
 names:any;
 constructor(){
    this.title = "Angular 2 simple search";
        this.names =         ['Prashobh','Abraham','Anil','Sam','Natasha','Marry','Zian','karan']
  }
}

*** this works perfectly but in my case this.name array is deferent as told above.

Answer 1

You can try something similar like below

<input type="text" [(ngModel)]="queryString" id="search" placeholder="Search to type">
  <ul>
    <li *ngFor="let n of list | FilterPipe: queryString : searchableList ">
      {{n.name}} ({{n.id}})
    </li>
  </ul>

pass required field to be searched

this.searchableList = ['name','id']  

pipe

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

@Pipe({
    name: 'FilterPipe',
})
export class FilterPipe implements PipeTransform {
 transform(value: any, input: string,searchableList : any) {
  if (input) {
   input = input.toLowerCase();
   return value.filter(function (el: any) {
   var isTrue = false;
   for(var k in searchableList ){
     if(el[searchableList[k]].toLowerCase().indexOf(input) > -1){
      isTrue = true;
     }
     if(isTrue){
      return el
     }
    }
  })
 }
 return value;
 }
}

You can update the pipe according to your needs.

More Info

Answer 2

Given the fact that the data source is an array of objects, to be dynamic I will use the following pipe that will iterate each object for values, then if a match is found will keep the object for display:

Pipe

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

@Pipe({
  name: 'filter',
  pure: false
})
export class FilterPipe implements PipeTransform {

  transform(items: Array<any>, filter: string): any {
    if (!filter) {
      return items;
    }
    return items.filter(item => {
      for (let field in item) {
        if (item[field] === null || item[field] === undefined){
          continue;
        }
        if (item[field].toString().toLowerCase().indexOf(filter.toLowerCase()) !== -1) {
          return true;
        }
      }
      return false;
    }
    );
  }
}

HTML

<input type="text" [(ngModel)]="search" placeholder="Filter...">
<div *ngFor="let item of datasource | filter:search"></div>

Look at pure: false declaration of the pipe. This tells the pipe to filter continuously the data, so if you have a service that is dynamically pushing data into your datasource, your filtered display will update automatically. Also using a pipe like this you can filter on all values of your objects and objects can change structure dynamically without impact on your filter.