ngx-input-autocomplete v0.2.1
ngx input autocomplete
Demo
https://mattlewis92.github.io/angular-text-input-autocomplete/
Table of contents
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:
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:
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.
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/
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
- Bump the version in package.json (once the module hits 1.0 this will become automatic)
npm run release
License
MIT