Angular2 Auto suggester - json

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

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.

Answer 2

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.