У меня возникли проблемы с поиском хорошего компонента автозаполнения для Angular2. Просто все, что я могу передать список ключей, помечать объекты и иметь хороший автозаполнение в поле ввода. Kendo пока не поддерживает angular2 и что это то, что мы в основном используем внутри. Похоже, что материал angular поддерживает angular 2. Может ли кто-нибудь указать мне в правильном направлении или сообщить мне, что они используют?
Это то, что я создал до сих пор. Это довольно плохо, и я хотел бы найти что-то, что выглядит хорошо.
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);
}
}