Awesome
Angular UI auto-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
-
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
-
As a component
<ngui-auto-complete [(ngModel)]="myData" [source]="mySource"></ngui-auto-complete>
-
As a directive
<input auto-complete [(ngModel)]="myData" [source]="mySource" />
For full example, please check demo
directory to see the example of app.module.ts
and app.component.ts
.
Demo
You can look at different showcases 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 responsemin-chars, number
, when source is remote data, the number of character to see drop-down listdisplay-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 itemblank-option-text
, string, guide text to allow empty value to be selected as in empty value ofoption
tag.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)"
customSelected
callback 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, nullaccept-user-input
boolean, iffalse
and 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-list
number, maximum number of drop down list items. Default, unlimitedtab-to-select
boolean, iftrue
, pressing <kbd>Tab</kbd> will set the value from the selected item before focus leaves the control. Default istrue
select-on-blur
boolean, iftrue
,blur
event will set the value from the selected item before focus leaves the control. Default isfalse
match-formatted
boolean, 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, iffalse
drop down won't open on a focus event, . Default istrue
close-on-focusout
, boolean, iffalse
drop down will close on a focusout event, . Default istrue
re-focus-after-select property
, boolean, iffalse
an auto focus behavior after select (example: custom value on blur event or issue #276) is disabled . Default istrue
autocomplete
, boolean, defaultfalse
, iftrue
remove 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, nullignore-accents
, boolean, defaulttrue
, iffalse
user 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
To build new docs version
$ npm build-docs
List of available npm tasks
npm run
: List all available tasksnpm start
: Rundemo
directory for development using@angular/cli
with 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)npm run build-docs
: Build a new version for life demo got GitHub pages