Implement forceSelection attribute

README.md

@@ -112,6 +112,7 @@ Add the following to `System.js` map configuration:
 |overrideSuggested|If true will override suggested and set the model with the value in the input field.|boolean|No|false|
 |openOnFocus|If true will open the dropdown and perform search when the input gets the focus.|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|true|
 |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>

src/components/completer-cmp.ts

@@ -135,6 +135,7 @@ export class CompleterCmp implements OnInit, ControlValueAccessor, AfterViewChec
  @Input() public openOnFocus = 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

@@ -27,6 +27,7 @@ export class CtrInput {
  @Input("overrideSuggested") public overrideSuggested = false;
  @Input("fillHighlighted") public fillHighlighted = true;
  @Input("openOnFocus") public openOnFocus = false;
+ @Input("forceSelection") public forceSelection = false;
 
  @Output() public ngModelChange: EventEmitter<any> = new EventEmitter();
 
@@ -99,7 +100,9 @@ export class CtrInput {
  if (this.completer.hasHighlighted()) {
  event.preventDefault();
  }
- this.handleSelection();
+ if (!this.forceSelection || this.completer._hasHighlighted) {
+ this.handleSelection();
+ }
  } else if (event.keyCode === KEY_DW) {
  event.preventDefault();
  this.completer.open();
@@ -108,7 +111,9 @@ export class CtrInput {
  event.preventDefault();
  this.completer.prevRow();
  } else if (event.keyCode === KEY_TAB) {
- this.handleSelection();
+ if (!this.forceSelection || this.completer._hasHighlighted) {
+ this.handleSelection();
+ }
  } else if (event.keyCode === KEY_ES) {
  // This is very specific to IE10/11 #272
  // without this, IE clears the input text