为angular2实现自动完成

我无法为Angular2find一个很好的自动完成组件。 只要我可以传递一个键列表，标签对象，并在input字段上有一个很好的自动完成。 Kendo目前还不支持angular2，而且我们主要在内部使用它。 看起来angular材料不支持angular2。 任何人都可以请指出我在正确的方向或让我知道他们正在使用？

这是我迄今为止build立的。 这是非常糟糕的，我想find一些看起来不错的东西。

import {Component, EventEmitter, Input, Output} from 'angular2/core'; import {Control} from 'angular2/common'; import {Observable} from 'rxjs/Observable'; import {SimpleKeyValue} from '../models/simple-key-value' import 'rxjs/add/operator/map'; import 'rxjs/add/operator/debounceTime'; import 'rxjs/add/operator/distinctUntilChanged'; @Component({ selector: 'general-typeahead', template: ` <div> <div class="input-group"> <input type="text" [ngFormControl] = "term" class="form-control" placeholder={{placeHolder}} > </div> <ul> <li class="item" *ngFor="#item of matchingItems" (click)="selectItem(item)"> {{item.value}} </li> </ul> </div>` }) export class GeneralTypeahead { matchingItems: Array<SimpleKeyValue>; term = new Control(); @Input() allItems: Array<SimpleKeyValue>; @Input() placeHolder: string; @Output() onSelectItem = new EventEmitter<SimpleKeyValue>(); constructor() { this.term.valueChanges .distinctUntilChanged() .debounceTime(200) .subscribe((term : string) => this.matchingItems = this.allItems.filter(sl => sl.value.toLowerCase().indexOf(term.toLowerCase()) > -1)); } selectItem(sl: SimpleKeyValue) { this.onSelectItem.emit(sl); } } 

Answer 1

更新：这个答案导致了ng2-completer一个Angular2自动完成组件的开发这是Angular2的现有自动完成组件的列表：

1. NG2补足者
2. NG2-自动完成
3. NG2-预input

为了实现这个想法，信贷去了@ dan-cancro

对那些希望创build自己的指令的人保留原来的答案：

要显示自动完成列表，我们首先需要一个属性指令 ，该指令将返回基于input文本的build议列表，然后将其显示在下拉列表中。 该指令有两个选项来显示列表：

1. 获取nativeElement的引用并直接操作DOM
2. 使用DynamicComponentLoaderdynamic加载列表组件

在我看来，第二种方式是更好的select，因为它使用angular度2核心机制，而不是通过直接使用DOM绕过它们，因此我将使用此方法。

这是指令代码：

 "use strict"; import {Directive, DynamicComponentLoader, Input, ComponentRef, Output, EventEmitter, OnInit, ViewContainerRef} from "@angular/core"; import {Promise} from "es6-promise"; import {AutocompleteList} from "./autocomplete-list"; @Directive({ selector: "[ng2-autocomplete]", // The attribute for the template that uses this directive host: { "(keyup)": "onKey($event)" // Liten to keyup events on the host component } }) export class AutocompleteDirective implements OnInit { // The search function should be passed as an input @Input("ng2-autocomplete") public search: (term: string) => Promise<Array<{ text: string, data: any }>>; // The directive emits ng2AutocompleteOnSelect event when an item from the list is selected @Output("ng2AutocompleteOnSelect") public selected = new EventEmitter(); private term = ""; private listCmp: ComponentRef<AutocompleteList> = undefined; private refreshTimer: any = undefined; private searchInProgress = false; private searchRequired = false; constructor( private viewRef: ViewContainerRef, private dcl: DynamicComponentLoader) { } /** * On key event is triggered when a key is released on the host component * the event starts a timer to prevent concurrent requests */ public onKey(event: any) { if (!this.refreshTimer) { this.refreshTimer = setTimeout( () => { if (!this.searchInProgress) { this.doSearch(); } else { // If a request is in progress mark that a new search is required this.searchRequired = true; } }, 200); } this.term = event.target.value; if (this.term === "" && this.listCmp) { // clean the list if the search term is empty this.removeList(); } } public ngOnInit() { // When an item is selected remove the list this.selected.subscribe(() => { this.removeList(); }); } /** * Call the search function and handle the results */ private doSearch() { this.refreshTimer = undefined; // if we have a search function and a valid search term call the search if (this.search && this.term !== "") { this.searchInProgress = true; this.search(this.term) .then((res) => { this.searchInProgress = false; // if the term has changed during our search do another search if (this.searchRequired) { this.searchRequired = false; this.doSearch(); } else { // display the list of results this.displayList(res); } }) .catch(err => { console.log("search error:", err); this.removeList(); }); } } /** * Display the list of results * Dynamically load the list component if it doesn't exist yet and update the suggestions list */ private displayList(list: Array<{ text: string, data: any }>) { if (!this.listCmp) { this.dcl.loadNextToLocation(AutocompleteList, this.viewRef) .then(cmp => { // The component is loaded this.listCmp = cmp; this.updateList(list); // Emit the selectd event when the component fires its selected event (<AutocompleteList>(this.listCmp.instance)).selected .subscribe(selectedItem => { this.selected.emit(selectedItem); }); }); } else { this.updateList(list); } } /** * Update the suggestions list in the list component */ private updateList(list: Array<{ text: string, data: any }>) { if (this.listCmp) { (<AutocompleteList>(this.listCmp.instance)).list = list; } } /** * remove the list component */ private removeList() { this.searchInProgress = false; this.searchRequired = false; if (this.listCmp) { this.listCmp.destroy(); this.listCmp = undefined; } } } 

该指令dynamic加载下拉组件，这是一个使用引导程序4的组件的示例：

 "use strict"; import {Component, Output, EventEmitter} from "@angular/core"; @Component({ selector: "autocomplete-list", template: `<div class="dropdown-menu search-results"> <a *ngFor="let item of list" class="dropdown-item" (click)="onClick(item)">{{item.text}}</a> </div>`, // Use a bootstrap 4 dropdown-menu to display the list styles: [".search-results { position: relative; right: 0; display: block; padding: 0; overflow: hidden; font-size: .9rem;}"] }) export class AutocompleteList { // Emit a selected event when an item in the list is selected @Output() public selected = new EventEmitter(); public list; /** * Listen for a click event on the list */ public onClick(item: {text: string, data: any}) { this.selected.emit(item); } } 

要在另一个组件中使用该指令，您需要导入该指令，将其包含在组件指令中，并为该select提供一个search函数和事件处理程序：

  "use strict"; import {Component} from "@angular/core"; import {AutocompleteDirective} from "../component/ng2-autocomplete/autocomplete"; @Component({ selector: "my-cmp", directives: [AutocompleteDirective], template: `<input class="form-control" type="text" [ng2-autocomplete]="search()" (ng2AutocompleteOnSelect)="onItemSelected($event)" autocomplete="off">` }) export class MyComponent { /** * generate a search function that returns a Promise that resolves to array of text and optionally additional data */ public search() { return (filter: string): Promise<Array<{ text: string, data: any }>> => { // do the search resolve({text: "one item", data: null}); }; } /** * handle item selection */ public onItemSelected(selected: { text: string, data: any }) { console.log("selected: ", selected.text); } } 

更新：与angular2 rc.1兼容的代码

Answer 2

PrimeNG具有原生自动完成组件，具有模板化和多重select等高级function。

http://www.primefaces.org/primeng/#/autocomplete

Answer 3

我想你可以使用typeahead.js 。 有打字稿的定义。 所以它会很容易使用它，我猜如果你正在使用打字稿进行开发。

Answer 4

我知道你已经有了几个答案，但是我也遇到了类似的情况，我的团队不想依赖沉重的图书馆或者任何与自举相关的东西，因为我们使用的是材料，所以我做了自己的自动完成控制，样式，你可以使用我的自动完成，或者至less你可以看看给你一些guiadance，没有太多关于如何上传你的组件在NPM上共享的简单例子的文档。

Answer 5

我已经为anuglar2自动完成创build了一个模块在这个模块中，你可以使用数组或urlnpm链接： ang2-autocomplete

Answer 6

构build可用于在angular材料中自动完成的组件

点击这里查看 ！

注意：您甚至可以按照您的要求自定义此自动填充的filter逻辑。

Answer 7

基于上面的例子，我创build了这样的东西，这里是一个plunker演示： https ://plnkr.co:443/2aL2Ju和github url： https ： //github.com/creativedeveloper-net/angular2-autocomplete感觉免费更新/改善它

 to see the code please see attached links