Package Exports

nb-autocomplete

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nb-autocomplete) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

angular text input autocomplete

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

Demo

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

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 --save angular-text-input-autocomplete

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

npm install --save 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: 'nb-demo-app',
  template: `
    <nb-text-input-autocomplete-container>
      <textarea
        placeholder="Type @ to search..."
        class="form-control"
        rows="5"
        [(ngModel)]="formControlValue"
        nbTextInputAutocomplete
        [findChoices]="findChoices"
        [getChoiceLabel]="getChoiceLabel">
      </textarea>
    </nb-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.

Usage without a module bundler

<script src="node_modules/angular-text-input-autocomplete/bundles/angular-text-input-autocomplete.umd.js"></script>
<script>
    // everything is exported angularTextInputAutocomplete namespace
</script>

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/

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

Bump the version in package.json (once the module hits 1.0 this will become automatic)

npm run release

License

MIT

nb-autocomplete