ngx input autocomplete


Demo

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

Table of contents

- About
- Installation
- Documentation
- Development
- License

About

Derived from angular-text-input-autocomplete 0.1.2:

https://www.npmjs.com/package/angular-text-input-autocomplete

All configuration is same as angular-text-input-autocomplete.

Some changes:

* Background color for catalog name, which is identified by '---'. Meaning, any item in the dropdown list starts with '---' will have a different background.
* Escape key closes the dropdown menu
* Dropdown menu is scrollable
* Up/Down arrows scroll the scrollable dropdown menu.

Installation

Install through npm:
``
npm install --save ngx-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:

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

keyboardEventKeyPolyfill();

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

Finally use in one of your apps components:
`typescript
import { Component } from '@angular/core';

@Component({
selector: 'mwl-demo-app',
template:

placeholder="Type @ to search..."
class="form-control"
rows="5"
[(ngModel)]="formControlValue"
mwlTextInputAutocomplete
[findChoices]="findChoices"
[getChoiceLabel]="getChoiceLabel">



})
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.

$3


`


`

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

$3

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

$3

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

$3

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

$3

* Bump the version in package.json (once the module hits 1.0 this will become automatic)
`bash
npm run release
``

License

MIT