Angular2自动提示器 [英] Angular2 Auto suggester

问题描述

我已经在INTERNET上进行了大量搜索，但仍然无法弄清楚我如何可以在没有任何第三方的情况下创建自定义自动提示器.在很多Google之后，我发现此

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

但是问题是我从api得到的响应有点不同，我得到的响应是:

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"}...]

由于要在管道中获取[object] [object]作为值.

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.

管道:

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;
}
}

在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.name数组与上面所述不同.

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

推荐答案

您可以尝试类似以下内容

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>

通过必填字段进行搜索

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

管道

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.

更多信息

这篇关于Angular2自动提示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！