为angular2实现自动完成

前端之家收集整理的这篇文章主要介绍了为angular2实现自动完成前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我无法找到一个良好的自动完成组件Angular2。只是任何东西,我可以传递一个键的列表,标签对象,并在输入字段有一个很好的自动完成。
Kendo不支持angular2,它是我们主要在内部使用。角材料似乎也不支持角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);
  }
}
更新:这个答案导致了 ng2-completer的Angular2自动完成组件的开发
这是Angular2的退出自动完成组件的列表:

> ng2-completer
> ng2-auto-complete
> ng2-typeahead

信用到@ dan-cancro与这个想法相符

为那些希望创建自己的指令的人保留原始答案:

显示自动完成列表,我们首先需要一个attribute directive,它将返回基于输入文本的建议列表,然后在下拉列表中显示它们。
该指令有两个选项来显示列表:

>获取对nativeElement的引用并直接操作DOM
>使用DynamicComponentLoader动态加载列表组件

它看起来对我来说,第二种方式是一个更好的选择,因为它使用角2核心机制,而不是通过直接与DOM工作绕过他们,因此我会使用这种方法

这是指令代码

"use strict";
import {Directive,DynamicComponentLoader,ComponentRef,Output,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;
        }
    }
}

该指令动态加载下拉组件,这是使用引导4的此类组件的示例:

"use strict";
import {Component,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);
    }
}

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

猜你在找的Angularjs相关文章