@youssseeef/auto-complete-dropdown-categories
v0.0.2
Published
Angular Input Autocomplete with drop-down and categories
Downloads
3
Maintainers
Readme
auto-complete with drop-down and categories
This project is a fork of ng2-ui/auto-complete
This will only add a feature of having a fixed-size drop-down menu and have them sorted by category
Below are plunks for different scenarios:
Template Driven Forms
ngModel http://plnkr.co/edit/3pB1Gx?p=preview
Reactive Forms
FormGroup http://plnkr.co/edit/2osUq6?p=preview issue #49
FormControl http://plnkr.co/edit/A5CW2e?p=preview issue #100
Material Design
http://plnkr.co/edit/2YLDjX?p=preview&open=app/app.component.ts
Obervable Source
http://plnkr.co/edit/ExzNSh?p=preview
List Formatter Example
http://plnkr.co/edit/F9nrWp?p=preview
http://plnkr.co/edit/0QFYFHMmCAFmhbYAGQl7?p=preview (With custom css)
Install
install @youssseeef/auto-complete-dropdown-categories
$ npm install @youssseeef/auto-complete-dropdown-categories --save
add
map
andpackages
to yoursystemjs.config.js
unless you are usingwebpack
map['@youssseeef/auto-complete-dropdown-categories'] = 'node_modules/@youssseeef/auto-complete-dropdown-categories/dist/auto-complete.umd.js';
import NguiAutoCompleteModule to your AppModule
import { NguiAutoCompleteModule } from '@youssseeef/auto-complete-dropdown-categories'; @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.js
app.module.ts
- and
app.component.ts
.
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.
attributes
All options are optional except ngModel and source
ngModel
, any, variable that autocomplete result is assigned tosource
, array or string, required. data source for dropdown listauto-complete-placeholder
, string, autocomplete input guide textvalue-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 Tab 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-focus
, 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.
For Developers
To start
$ git clone https://github.com/youssseeef/auto-complete.git
$ cd auto-complete
$ npm install
$ npm start
List of available npm tasks
npm run
: List all available tasksnpm start
: Runapp
directory for development usingwebpack-dev-server
with port 9001npm run clean
: Remove dist foldernpm run lint
: Lint TypeScript codenpm run build:ngc
: build ES modulenpm run build:umd
: Build UMD moduleng2-map.umd.js
npm run build:app
: Buildapp/build/app.js
for runnable examplesnpm run build
: Build all(clean, build:ngc, build:umc, and build:app)