1.0.15 • Published 4 years ago
ngx-smart-autocomplete v1.0.15
Ng2-Smart-AutoComplete
What is ng2-smart-autocomplete?
ng2-smart-autocomplete is a Angular Library which allows the visitor to select an item from a Real-time pull dropdown list when typing something into an input field. Similar to the autocomplete, typeahead and tags input plugins.
Features
- Lightweight
- Tag input
- Keyboard shortcuts
- Dynamic drop-down lists
Install
$ npm install ng2-smart-autocomplete --saveUsage
1、import Ng2SmartAutocompleteModule to your AppModule
import { Ng2SmartAutocompleteModule } from 'ng2-smart-autocomplete';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
Ng2SmartAutocompleteModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }2、use it in your template
<smart-autocomplete [displayData]="myDisplayData" [fetchData]="myFetchData" (fetchMethod)="myFetchMethod($event)"></smart-autocomplete>Attributes
| @Input()/@Output() | Type | Required | Default | Description |
|---|---|---|---|---|
| displayData | array | required | [] | Used to save the currently selected data list. Expect such a data format {id:'xx',name:'xx'},... |
| fetchData | array | required | [] | Data source array,used to save the current real-time pull data list. Expect such a data format {id:'xx',name:'xx'},... |
| maxCount | number | optional | unlimited | The maximum number of selected data lists, the default number is unlimited. |
| en | boolean | optional | false | If true, the English template is used, otherwise the Chinese template is used, the default is false. |
| fetchMethod | fn | required | - | Real-time data pull method, receiving a keyword parameter（$event）(It should be noted that fetchData should be updated after the data is obtained) |
For Developers
$ git clone https://github.com/kuroky360/ng2-smart-autocomplete.git
$ cd ng2-smart-autocomplete
$ npm install
$ npm startList of available npm tasks
npm run package: build and package project