Implement forceSelection attribute

README.md

@@ -115,6 +115,7 @@ Add the following to `System.js` map configuration:
 |selectOnFocus|If true will select the input text upon focus.|boolean|No|false|
 |selectOnClick|If true will select the input text by click.|boolean|No|false|
 |fillHighlighted|If true will set the model with the value in the input field when item is highlighted.|boolean|No|true|
+|forceSelection|If true will prevent from closing dropdown on Enter and Tab keys down if no selection was made.|boolean|No|false|
 |pause|Number of msec. to wait before searching.|number|No|250|
 |placeholder|Placeholder text for the search field.|string|No||
 |textNoResults|Text displayed when the search returned no results. if the string is falsy it won't be displayed|string|No|

demo/completer-cmp-md.html

@@ -1,6 +1,6 @@
 <div class="completer-holder" ctrCompleter>
  <md-input-container class="completer-input">
- <input mdInput ctrInput="clearSelected=clearSelected; overrideSuggested=overrideSuggested; fillHighlighted=fillHighlighted" [(ngModel)]="searchStr" 
+ <input mdInput ctrInput="clearSelected=clearSelected; overrideSuggested=overrideSuggested; fillHighlighted=fillHighlighted; forceSelection=forceSelection" [(ngModel)]="searchStr" 
  [attr.name]="inputName" [attr.maxlength]="maxChars" [tabindex]="fieldTabindex" [disabled]="disableInput" (blur)="onBlur()" [placeholder]="placeholder"
  autocomplete="off" autocorrect="off" autocapitalize="off">
  </md-input-container>
@@ -25,4 +25,4 @@
  </md-list-item>
  </md-list>
  </div>
-</div>
+</div>

demo/completer-cmp-md.ts

@@ -33,6 +33,7 @@ export class CompleterCmpMd implements OnInit, ControlValueAccessor {
  @Input() public overrideSuggested = false;
  @Input() public fillHighlighted = true;
  @Input() public clearSelected = false;
+ @Input() public forceSelection = false;
  @Input() public placeholder = "";
  @Input() public matchClass: string;
  @Input() public textSearching = TEXT_SEARCHING;

demo/native-cmp.html

@@ -293,6 +293,31 @@ <h3>Do not set input value when item is highlighted</h3>
  </div>
 </div>
 
+<h3>Force selection</h3>
+<p>Local data of colors; with <code>minSearchLength</code>, <code>textSearching</code>, <code>clearUnselected</code> and <code>forceSelection</code></p>
+
+<div class="card">
+ <div class="card-block">
+ <div class="form-group row">
+ <div class="col-5">
+ <ng2-completer [datasource]="dataService4"
+ [minSearchLength]="1"
+ [placeholder]="'search color'"
+ [inputClass]="'form-control'"
+ [forceSelection]="true"
+ [clearUnselected]="true"
+ [(ngModel)]="color5"
+ [textSearching]="'Please wait...'">
+ </ng2-completer>
+
+ </div>
+ <div class="col-6">
+ <p class="form-control-static"><b> {{color5}}</b></p>
+ </div>
+ </div>
+ </div>
+</div>
+
 
 <h3>Events</h3>
 <p>Event triggering with <code>onBlur</code> and <code>onFocus</code> events.</p>

src/components/completer-cmp.ts

@@ -27,8 +27,8 @@ const COMPLETER_CONTROL_VALUE_ACCESSOR = {
  <input #ctrInput [attr.id]="inputId.length > 0 ? inputId : null" type="search" class="completer-input" ctrInput [ngClass]="inputClass"
  [(ngModel)]="searchStr" (ngModelChange)="onChange($event)" [attr.name]="inputName" [placeholder]="placeholder"
  [attr.maxlength]="maxChars" [tabindex]="fieldTabindex" [disabled]="disableInput"
- [clearSelected]="clearSelected" [clearUnselected]="clearUnselected"
- [overrideSuggested]="overrideSuggested" [openOnFocus]="openOnFocus" [fillHighlighted]="fillHighlighted" 
+ [clearSelected]="clearSelected" [clearUnselected]="clearUnselected" [forceSelection]="forceSelection"
+ [overrideSuggested]="overrideSuggested" [openOnFocus]="openOnFocus" [fillHighlighted]="fillHighlighted"
  [openOnClick]="openOnClick" [selectOnClick]="selectOnClick" [selectOnFocus]="selectOnFocus"
  (blur)="onBlur()" (focus)="onFocus()" (keyup)="onKeyup($event)" (keydown)="onKeydown($event)" (click)="onClick($event)"
  autocomplete="off" autocorrect="off" autocapitalize="off" />
@@ -140,6 +140,7 @@ export class CompleterCmp implements OnInit, ControlValueAccessor, AfterViewChec
  @Input() public selectOnFocus = false;
  @Input() public initialValue: any;
  @Input() public autoHighlight = false;
+ @Input() public forceSelection = false;
 
  @Output() public selected = new EventEmitter<CompleterItem>();
  @Output() public highlighted = new EventEmitter<CompleterItem>();

src/directives/ctr-input.ts

@@ -34,6 +34,7 @@ export class CtrInput {
  @Input("openOnClick") public openOnClick = false;
  @Input("selectOnClick") public selectOnClick = false;
  @Input("selectOnFocus") public selectOnFocus = false;
+ @Input("forceSelection") public forceSelection = false;
 
  @Output() public ngModelChange: EventEmitter<any> = new EventEmitter();
 
@@ -213,7 +214,8 @@ export class CtrInput {
  this.completer.selectCurrent();
  } else if (this.overrideSuggested) {
  this.completer.onSelected({ title: this.searchStr, originalObject: null });
- } else {
+ }
+ else if (!this.forceSelection) {
  if (this.clearUnselected) {
  this.searchStr = "";
  this.ngModelChange.emit(this.searchStr);