Реализация автозаполнения для angular2

Ответ 1

Обновление:. Этот ответ привел к разработке ng2-completer компонента автозаполнения Angular2 Это список выходных компонентов автозаполнения для Angular2:

• ng2-completer
• ng2-auto-complete
• ng2-typeahead

кредит отправляется @dan-cancro за то, что он отправился с идеей

Сохранение исходного ответа для тех, кто хочет создать свою собственную директиву:

Чтобы отобразить список автозаполнения, нам сначала потребуется директива атрибута , которая вернет список предложений на основе входного текста, а затем отобразит их в раскрывающемся списке. В директиве есть две опции для сортировки списка:

• Получить ссылку на nativeElement и напрямую манипулировать DOM.
• Динамически загружать компонент списка с помощью DynamicComponentLoader

Мне кажется, что второй способ - лучший выбор, поскольку он использует 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;
        }
    }
}

Директива динамически загружает выпадающий компонент, это образец такого компонента с использованием бутстрапа 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);
    }
}

Чтобы использовать директиву в другом компоненте, вам нужно импортировать директиву, включить ее в директивы компонентов и предоставить ей функцию поиска и обработчик событий для выбора:

 "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

Ответ 2

PrimeNG имеет собственный компонент AutoComplete с расширенными функциями, такими как шаблонирование и множественный выбор.

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

Ответ 3

Я думаю, вы можете использовать typeahead.js. Для него существуют определения typescript. поэтому будет легко использовать его, я думаю, если вы используете typescript для разработки.

Ответ 4

Я знаю, что у вас уже есть несколько ответов, но я был в похожей ситуации, когда моя команда не хотела зависеть от тяжелых библиотек или чего-либо, связанного с загрузкой, поскольку мы используем материал, поэтому я сделал свой собственный контроль автозаполнения, используя подобный материалу, вы можете использовать autocomplete или, по крайней мере, вы можете взглянуть, чтобы дать вам В некоторых примерах было мало документации по простым примерам того, как загружать ваши компоненты для совместного использования в NPM.

Ответ 5

Я создал модуль для автозаполнения anuglar2 В этом модуле вы можете использовать массив или URL-адрес npm link: ang2-autocomplete

Ответ 6

Встраиваемый компонент, доступный для автозаполнения в angular -материале

Нажмите здесь, чтобы проверить его!

Примечание. Вы можете даже настроить логику фильтра этого автозаполнения в соответствии с вашими требованиями.

Ответ 7

Основываясь на примерах выше, я создал что-то вроде этого, вот демоверсия plunker: https://plnkr.co:443/2aL2Ju и github url: https://github.com/creativedeveloper-net/angular2-autocomplete не стесняйтесь обновлять/улучшать его

to see the code please see attached links