return keyword if no items were selected

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]

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`.
 
 <a href="https://rawgit.com/ng2-ui/auto-complete/master/app/index.html">
@@ -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 <kbd>Tab</kbd> 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`

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 = `
   <h1> Autocomplete Directive Test - Local Source </h1>
     
@@ -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">
         <input id="model1" [ngModel]="model1" autofocus />
       </div>
@@ -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;

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",

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,15 +246,19 @@ 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) {
     this.textEntered.emit(data);
   }
 
   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;

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<NguiAutoCompleteComponent>;
@@ -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 = <NguiAutoCompleteComponent>this.componentRef.instance;
       component.dropdownVisible = true;
+      component.keyword = evt.target.value;
       component.reloadListInDelay(evt);
     } else {
       this.showAutoCompleteDropdown()