A angular 4+ directive for adding autocomplete functionality to text input elements, built around composability
npm install ngx-input-autocomplete- About
- Installation
- Documentation
- Development
- License
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.
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.
`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 textareaDevelopment
$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
``MIT