Implementing autocomplete

Update: This answer has led to the development of ng2-completer an Angular2 autocomplete component.This is the list of existing autocomplete components for Angular2:

1. ng2-completer
2. ng2-auto-complete
3. ng2-typeahead

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:

1. Obtain a reference to the nativeElement and manipulate the DOM directly
2. Dynamically load a list component using DynamicComponentLoader

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:

"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;        }    }}

The directive dynamically loads a dropdown component, this is a sample of such a component using bootstrap 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);    }}

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:

 "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);    }}

Update: code compatible with angular2 rc.1

PrimeNG has a native AutoComplete component with advanced features like templating and multiple selection.

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

I think you can use typeahead.js. There are typescript definitions for it. so it'll be easy to use it i guess if you are using typescript for development.