mattlewis92 / angular-text-input-autocomplete

A angular 6+ directive for adding autocomplete functionality to text input elements, built around composability

angular text input autocomplete

Demo

https://mattlewis92.github.io/angular-text-input-autocomplete/

Table of contents

• About
• Installation
• Documentation
• Development
• License

About

A angular 6+ directive for adding autocomplete functionality to text input elements, built around composability

Installation

Install through npm:

npm install angular-text-input-autocomplete

For older browsers you will need the keyboardevent-key-polyfill polyfill:

npm install keyboardevent-key-polyfill

Then include in your apps module:

import { polyfill as keyboardEventKeyPolyfill } from 'keyboardevent-key-polyfill';
import { NgModule } from '@angular/core';
import { TextInputAutocompleteModule } from 'angular-text-input-autocomplete';

keyboardEventKeyPolyfill();

@NgModule({
  imports: [TextInputAutocompleteModule]
})
export class MyModule {}

Finally use in one of your apps components:

import { Component } from '@angular/core';

@Component({
  selector: 'mwl-demo-app',
  template: `
    <mwl-text-input-autocomplete-container>
      <textarea
        placeholder="Type @ to search..."
        class="form-control"
        rows="5"
        [(ngModel)]="formControlValue"
        mwlTextInputAutocomplete
        [findChoices]="findChoices"
        [getChoiceLabel]="getChoiceLabel">
      </textarea>
    </mwl-text-input-autocomplete-container>
  `
})
export class DemoComponent {
  formControlValue = '';

  findChoices(searchText: string) {
    return ['John', 'Jane', 'Jonny'].filter(item =>
      item.toLowerCase().includes(searchText.toLowerCase())
    );
  }

  getChoiceLabel(choice: string) {
    return `@${choice} `;
  }
}

You may also find it useful to view the demo source.

Customising the menu component UI

By default the component works out of the box with bootstrap, but if you're using a different UI framework then you can customise the menu component that gets displayed.

1. Create a custom menu component and add it to your components NgModule declarations (If you're not using ivy then you will need to add it to entryComponents as well)

import { Component } from '@angular/core';
import { TextInputAutocompleteMenuComponent } from 'angular-text-input-autocomplete';

@Component({
  template: `
    I'm a custom menu template!
    <ul 
      *ngIf="choices?.length > 0"
      #dropdownMenu
      class="dropdown-menu"
      [style.top.px]="position?.top"
      [style.left.px]="position?.left">
      <li
        *ngFor="let choice of choices; trackBy:trackById"
        [class.active]="activeChoice === choice">
        <a
          href="javascript:;"
          (click)="selectChoice.next(choice)">
          {{ choice }}
        </a>
      </li>
    </ul>
  `
})
class CustomMenuComponent extends TextInputAutocompleteMenuComponent {}

2. Pass the component to the menuComponent input of the mwlTextInputAutocomplete directive

import { Component } from '@angular/core';

@Component({
  selector: 'mwl-demo-app',
  template: `
    <mwl-text-input-autocomplete-container>
      <textarea
        mwlTextInputAutocomplete
        [menuComponent]="menuComponent">
      </textarea>
    </mwl-text-input-autocomplete-container>
  `
})
export class DemoComponent {
  menuComponent = CustomMenuComponent;
}

Documentation

All documentation is auto-generated from the source via compodoc and can be viewed here: https://mattlewis92.github.io/angular-text-input-autocomplete/docs/

Related

angular-text-input-highlight - a component for highlighting parts of a textarea

Development

Prepare your environment

• Install Node.js and NPM
• Install local dev dependencies: npm install while current directory is this repo

Development server

Run npm start to start a development server on port 8000 with auto reload + tests.

Testing

Run npm test to run tests once or npm run test:watch to continually run tests.

Release

npm run release

License

MIT