diff --git a/CHANGELOG.md b/CHANGELOG.md index 5ea9c07..df5568c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,5 @@ +### [0.14.2] +- return keyword if no items were selected ### [0.14.1] - add a new property `select-on-blur` ### [0.14.0] diff --git a/README.md b/README.md index a759030..df9dc34 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ After 0.13.0 or higher, ng2-auto-complete has been changed to @ngui/auto-complete. Here are the changes; * Module `ng2-auto-complete` is moved to `@ngui/auto-complete`. - * Direvtive `ng2-auto-complete` is moved to `ngui-auto-complete`. + * Directive `ng2-auto-complete` is moved to `ngui-auto-complete`. * Class name `Ng2AutoComplete` is moved to `NguiAutoComplete`. @@ -80,7 +80,7 @@ For full example, please check `test` directory to see the example of; This module is only improved and maintained by contributors like you; -As a contributor, it's NOT required to be skilled in Javascript nor Angular2. +As a contributor, it's NOT required to be skilled in Javascript nor Angular. You can contribute to the following; * Updating README.md @@ -113,17 +113,19 @@ please send me email to `allenhwkim AT gmail.com` with your github id. } * **`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 dropdown list + * **`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 is `value` * **`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 of `option` tag. * **`no-match-found-text`**, string, guide text to show no result found. - * **`valueChanged`** / **`ngModelChange`**, callback function that is executed when a new dropdown is selected. - e.g. `(valueChanged)="myCallback($event)"` + * **`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, null * **`accept-user-input`** boolean, if `false` 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 use `readonly="readonly"` to force user to select only from list. Default is `true` - * **`max-num-list`** number, maximun number of drop down list items. Default, unlimited + * **`max-num-list`** number, maximum number of drop down list items. Default, unlimited * **`tab-to-select`** boolean, if `true`, pressing Tab will set the value from the selected item before focus leaves the control. Default is `true` * **`select-on-blur`** boolean, if `true`, `blur` event will set the value from the selected item before focus leaves the control. Default is `false` * **`match-formatted`** boolean, if `true`, keyword will be matched against list values formatted with `list-formatter`, instead of raw objects. Default is `false` diff --git a/app/directive-test.component.ts b/app/directive-test.component.ts index 8660f21..acef0f3 100644 --- a/app/directive-test.component.ts +++ b/app/directive-test.component.ts @@ -1,8 +1,9 @@ -import { Http } from "@angular/http"; -import { Component, ViewEncapsulation } from "@angular/core"; -import { DomSanitizer, SafeHtml } from "@angular/platform-browser"; +import {Http} from "@angular/http"; +import {Component, ViewEncapsulation} from "@angular/core"; +import {DomSanitizer, SafeHtml} from "@angular/platform-browser"; + +import {AppSvc} from "./app.service"; -import { AppSvc } from "./app.service"; let templateStr: string = `

Autocomplete Directive Test - Local Source

@@ -14,6 +15,7 @@ let templateStr: string = ` [auto-select-first-item]="false" [select-on-blur]="true" (ngModelChange)="myCallback1($event)" + (customSelected)="customCallback($event)" placeholder="enter text"> @@ -168,6 +170,10 @@ export class DirectiveTestComponent { private _sanitizer: DomSanitizer ) { } + customCallback(text) { + console.log("keyword ", text) + } + myCallback1(newVal) { console.log("value is changed to ", newVal); this.model1 = newVal; diff --git a/package.json b/package.json index 70f45da..7be013a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ngui/auto-complete", - "version": "0.14.0", + "version": "0.14.2", "description": "Angular Input Autocomplete", "license": "MIT", "main": "dist/auto-complete.umd.js", diff --git a/src/auto-complete.component.ts b/src/auto-complete.component.ts index cec37ee..d2e85bd 100644 --- a/src/auto-complete.component.ts +++ b/src/auto-complete.component.ts @@ -119,6 +119,7 @@ export class NguiAutoCompleteComponent implements OnInit { @Input("select-on-blur") selectOnBlur: boolean = false; @Output() valueSelected = new EventEmitter(); + @Output() customSelected = new EventEmitter(); @Output() textEntered = new EventEmitter(); @ViewChild('autoCompleteInput') autoCompleteInput: ElementRef; @ViewChild('autoCompleteContainer') autoCompleteContainer: ElementRef; @@ -245,7 +246,11 @@ export class NguiAutoCompleteComponent implements OnInit { } selectOne(data: any) { - this.valueSelected.emit(data); + if (data) { + this.valueSelected.emit(data); + } else { + this.customSelected.emit(this.keyword); + } }; enterText(data: any) { @@ -253,7 +258,7 @@ export class NguiAutoCompleteComponent implements OnInit { } blurHandler(evt: any) { - if (this.selectOnBlur && this.filteredList.length > 0) { + if (this.selectOnBlur) { this.selectOne(this.filteredList[this.itemIndex]); } @@ -285,16 +290,12 @@ export class NguiAutoCompleteComponent implements OnInit { break; case 13: // ENTER, choose it!! - if (this.filteredList.length > 0 && this.itemIndex !== null) { - this.selectOne(this.filteredList[this.itemIndex]); - } else { - this.enterText(evt.target.value); - } + this.selectOne(this.filteredList[this.itemIndex]); evt.preventDefault(); break; case 9: // TAB, choose if tab-to-select is enabled - if (this.tabToSelect && this.filteredList.length > 0) { + if (this.tabToSelect) { this.selectOne(this.filteredList[this.itemIndex]); } break; diff --git a/src/auto-complete.directive.ts b/src/auto-complete.directive.ts index 6acc4cf..fa153f6 100644 --- a/src/auto-complete.directive.ts +++ b/src/auto-complete.directive.ts @@ -53,6 +53,7 @@ export class NguiAutoCompleteDirective implements OnInit, OnChanges { @Output() ngModelChange = new EventEmitter(); @Output() valueChanged = new EventEmitter(); + @Output() customSelected = new EventEmitter(); componentRef: ComponentRef; @@ -156,6 +157,7 @@ export class NguiAutoCompleteDirective implements OnInit, OnChanges { this.componentRef = this.viewContainerRef.createComponent(factory); let component = this.componentRef.instance; + component.keyword = this.inputEl.value; component.showInputTag = false; //Do NOT display autocomplete input tag separately component.pathToData = this.pathToData; @@ -177,6 +179,7 @@ export class NguiAutoCompleteDirective implements OnInit, OnChanges { component.valueSelected.subscribe(this.selectNewValue); component.textEntered.subscribe(this.enterNewText); + component.customSelected.subscribe(this.selectCustomValue); this.acDropdownEl = this.componentRef.location.nativeElement; this.acDropdownEl.style.display = "none"; @@ -200,7 +203,7 @@ export class NguiAutoCompleteDirective implements OnInit, OnChanges { if (this.componentRef) { const component = this.componentRef.instance; - if (this.selectOnBlur && component.filteredList.length > 0) { + if (this.selectOnBlur) { component.selectOne(component.filteredList[component.itemIndex]); } @@ -309,6 +312,11 @@ export class NguiAutoCompleteDirective implements OnInit, OnChanges { this.hideAutoCompleteDropdown(); }; + selectCustomValue = (text: string) => { + this.customSelected.emit(text); + this.hideAutoCompleteDropdown(); + }; + enterNewText = (value: any) => { this.renderValue(value); this.ngModelChange.emit(value); @@ -327,6 +335,7 @@ export class NguiAutoCompleteDirective implements OnInit, OnChanges { if (this.componentRef) { let component = this.componentRef.instance; component.dropdownVisible = true; + component.keyword = evt.target.value; component.reloadListInDelay(evt); } else { this.showAutoCompleteDropdown()