实现自动完成 [英] Implementing autocomplete
问题描述
我无法为 Angular2 找到一个好的自动完成组件.任何我可以将键标签对象列表传递给并在 input 字段上有一个很好的自动完成的东西.
Kendo 尚不支持 Angular 2，它是我们主要在内部使用的.Angular Material 似乎也不支持 Angular 2.
谁能给我指出正确的方向或让我知道他们在使用什么?
这是我目前构建的.这很糟糕，我想找到一些看起来不错的东西.
import {Component, EventEmitter, Input, Output} from 'angular2/core';从'angular2/common'导入{Control}；从 'rxjs/Observable' 导入 {Observable}；从 '../models/simple-key-value' 导入 {SimpleKeyValue}导入 'rxjs/add/operator/map';导入 'rxjs/add/operator/debounceTime';导入 'rxjs/add/operator/distinctUntilChanged';@成分({选择器:'general-typeahead'，模板:`<div><div class="input-group"><input type="text" [ngFormControl] = "term" class="form-control" placeholder={{placeHolder}} ><ul><li class="item" *ngFor="#item of matchingItems" (click)="selectItem(item)">{{item.value}}
`})导出类 GeneralTypeahead {匹配项:数组 更新: 这个答案导致了 感谢@dan-cancro 提出这个想法 为那些希望创建自己的指令的人保留原始答案: 要显示自动完成列表，我们首先需要一个属性指令这将根据输入文本返回建议列表，然后在下拉列表中显示它们.该指令有 2 个选项来显示列表: 在我看来，第二种方式是更好的选择，因为它使用 angular 2 核心机制，而不是通过直接使用 DOM 来绕过它们，因此我将使用这种方法. 这是指令代码: 该指令动态加载下拉组件，这是使用引导程序 4 的此类组件的示例: 要在另一个组件中使用该指令，您需要导入该指令，将其包含在组件指令中并为其提供搜索功能和事件处理程序以供选择: 更新:代码兼容angular2 rc.1 I am having trouble finding a good autocomplete component for Angular2. Just anything that I can pass a list of key-label objects to and have a nice autocomplete on an Kendo does not support Angular 2 yet and that it what we mostly use internally. It doesn't appear that Angular Material supports Angular 2 yet either. Can anyone please point me in the right direction or let me know what they are using? This is what I built so far. It's pretty bad and I'd like to find something that looks nice.
Update: This answer has led to the development of Credit goes to @dan-cancro for coming up with the idea Keeping the original answer for those who wish to create their own directive: To display autocomplete list we first need an attribute directive that will return the list of suggestions based on the input text and then display them in a dropdown.
The directive has 2 options to display the list: It looks to me that 2nd way is a better choice as it uses angular 2 core mechanisms instead of bypassing them by working directly with the DOM and therefore I'll use this method. This is the directive code: The directive dynamically loads a dropdown component, this is a sample of such a component using bootstrap 4: To use the directive in another component you need to import the directive, include it in the components directives and provide it with a search function and event handler for the selection: Update: code compatible with angular2 rc.1 这篇关于实现自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ng2-completer 一个 Angular2 自动完成组件.这是 Angular2 的现有自动完成组件列表:"use strict";从@angular/core"导入 {Directive, DynamicComponentLoader, Input, ComponentRef, Output, EventEmitter, OnInit, ViewContainerRef};从es6-promise"导入{Promise}；从./autocomplete-list"导入{AutocompleteList}；@指示({selector: "[ng2-autocomplete]",//使用该指令的模板的属性主持人: {"(keyup)": "onKey($event)"//监听宿主组件上的 keyup 事件}})导出类 AutocompleteDirective 实现 OnInit {//搜索函数应该作为输入传递@Input("ng2-autocomplete") 公共搜索:(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 listCmp: ComponentRef"use strict";从@angular/core"导入 {Component, Output, EventEmitter};@成分({选择器:自动完成列表"，模板:`<div class="dropdown-menu search-results"><a *ngFor="let item of list" class="dropdown-item" (click)="onClick(item)">{{item.text}}</a></div>`,//使用 bootstrap 4 下拉菜单来显示列表样式:[".search-results { position: relative; right: 0; display: block; padding: 0; overflow: hidden; font-size: .9rem;}"]})导出类 AutocompleteList {//当列表中的一个项目被选中时发出一个 selected 事件@Output() public selected = new EventEmitter();公开名单；/*** 监听列表上的点击事件*/public onClick(item: {text: string, data: any}) {this.selected.emit(item);}} "use strict";从@angular/core"导入{Component}；从../component/ng2-autocomplete/autocomplete"导入{AutocompleteDirective}；@成分({选择器:我的cmp"，指令:[AutocompleteDirective]，模板:`<input class="form-control" type="text" [ng2-autocomplete]="search()" (ng2AutocompleteOnSelect)="onItemSelected($event)" autocomplete="off">`})导出类 MyComponent {/*** 生成一个搜索函数，该函数返回一个解析为文本数组和可选附加数据的 Promise*/公共搜索(){return (filter: string): Promiseinput field.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);
}
}
ng2-completer an Angular2 autocomplete component.
This is the list of existing autocomplete components for Angular2:
"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;
}
}
}
"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);
}
}
"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);
}
}
