JarCastingauto-complete
IMPORTANT: HELP NEEDED
The project need your help, any help for fixing bugs and improvements are welcome!
Install
-
install @ngui/auto-complete
$ npm install @ngui/auto-complete --save -
add
mapandpackagesto yoursystemjs.config.jsunless you are usingwebpackmap['@ngui/auto-complete'] = 'node_modules/@ngui/auto-complete/dist/auto-complete.umd.js'; -
import NguiAutoCompleteModule to your AppModule
import { NguiAutoCompleteModule } from '@ngui/auto-complete'; @NgModule({ imports: [BrowserModule, FormsModule, NguiAutoCompleteModule], declarations: [AppComponent], providers: [HTTP_PROVIDERS], bootstrap: [ AppComponent ] }) export class AppModule { }
Usage it in your code
<input auto-complete [(ngModel)]="myData" [source]="mySource" />
For full example, please check test directory to see the example of;
systemjs.config.jsapp.module.ts- and
app.component.ts.
Demo
You can look at different show cases for it here as Component or Directive.
attributes
All options are optional except ngModel and source
-
ngModel, any, variable that autocomplete result is assigned to -
source, array or string, required. data source for dropdown list -
auto-complete-placeholder, string, autocomplete input guide text -
value-formatter, string or function variable name, custom value formatting function. e.g.(id) value, 'myValueFormatter.myValueFormatter(data: any): string { return `(${data[id]}) ${data[value]}`; } -
list-formatter, string or function variable name, custom list formatting function. e.g.(key) name,myListFormatter.myListFormatter(data: any): string { return `(${data[key]}) ${data[name]}`; } -
path-to-data, string, e.g.,data.myList, path to array data in http response -
min-chars, number, when source is remote data, the number of character to see drop-down list -
display-property-name, string, key name of text to show. default isvalue -
select-value-of, string, when selected, return the value of this key as a selected item -
blank-option-text, string, guide text to allow empty value to be selected as in empty value ofoptiontag. -
no-match-found-text, string, guide text to show no result found. -
valueChanged/ngModelChange, callback function that is executed when a new drop-down is selected. e.g.(valueChanged)="myCallback($event)" -
customSelectedcallback function that is executed when a value selected not included in drop-down, so it will return the keyword used. e.g.(customSelected)="customCallback($event)" -
loading-text, text to be displayed when loading. Default, "Loading" -
loading-template, html markup that is to be rendered when loading. Default, null -
accept-user-inputboolean, iffalseand does not match to source given, it goes back to the original value selected., If you don't event want user to type any, please usereadonly="readonly"to force user to select only from list. Default istrue -
max-num-listnumber, maximum number of drop down list items. Default, unlimited -
tab-to-selectboolean, iftrue, pressing Tab will set the value from the selected item before focus leaves the control. Default istrue -
select-on-blurboolean, iftrue,blurevent will set the value from the selected item before focus leaves the control. Default isfalse -
match-formattedboolean, iftrue, keyword will be matched against list values formatted withlist-formatter, instead of raw objects. Default isfalse -
auto-select-first-item, boolean, iftrue, the first item of the list is automatically selected, iffalse, user must select manually an item. Default isfalse -
open-on-focus, boolean, iffalsedrop down won't open on a focus event, . Default istrue -
close-on-focusout, boolean, iffalsedrop down will close on a focusout event, . Default istrue -
re-focus-after-select property, boolean, iffalsean auto focus behavior after select (example: custom value on blur event or issue #276) is disabled . Default istrue -
autocomplete, boolean, defaultfalse, iftrueremove the attributeautocomplete="off"of the input. -
header-item-template, html markup to optionally create a non-selectable header row above the list of results. Default, null -
ignore-accents, boolean, defaulttrue, iffalseuser input must match exactly with source given, including accents or diacritics
Below are plunks for different scenarios:
Template Driven Forms
Reactive Forms
-
FormControl http://plnkr.co/edit/A5CW2e?p=preview issue #100
Material Design
Observable Source
List Formatter Example
- Example 1 http://plnkr.co/edit/F9nrWp?p=preview
- Example 2 (With custom css) http://plnkr.co/edit/0QFYFHMmCAFmhbYAGQl7?p=preview
Contributors are welcomed
This module is only improved and maintained by contributors like you;
As a contributor, it's NOT required to be skilled in Javascript nor Angular. You can contribute to the following;
- Updating README.md
- Making more and clearer comments
- Answering issues and building FAQ
- Documentation
- Translation
In result of your active contribution, you will be listed as a core contributor on https://ng2-ui.github.io, and a member of ng2-ui too.
If you are interested in becoming a contributor and/or a member of ng-ui, please send me email to allenhwkim AT gmail.com with your github id.
For Developers
To start
$ git clone https://github.com/ng2-ui/auto-complete.git
$ cd auto-complete
$ npm install
$ npm build-lib:watch
$ # On different instance
$ npm start
To publish
$ npm build-lib:prod
$ cd dist
$ npm publish
List of available npm tasks
npm run: List all available tasksnpm start: Rundemodirectory for development using@angular/cliwith port 4200npm run lint: Lint TypeScript codenpm run build-lib:watch: Build library in live watch mode for developmentnpm run build-lib:prod: Build library for publish using view engine (not Ivy renderer)
