diff --git a/README.md b/README.md index 352575b..ef11b0f 100644 --- a/README.md +++ b/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| diff --git a/demo/completer-cmp-md.html b/demo/completer-cmp-md.html index 9d1de79..5211aaf 100644 --- a/demo/completer-cmp-md.html +++ b/demo/completer-cmp-md.html @@ -1,6 +1,6 @@
- @@ -25,4 +25,4 @@
- \ No newline at end of file + diff --git a/demo/completer-cmp-md.ts b/demo/completer-cmp-md.ts index 73fed69..3770d2b 100644 --- a/demo/completer-cmp-md.ts +++ b/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; diff --git a/demo/native-cmp.html b/demo/native-cmp.html index 0c51854..c07bfcc 100644 --- a/demo/native-cmp.html +++ b/demo/native-cmp.html @@ -293,6 +293,31 @@

Do not set input value when item is highlighted

+

Force selection

+

Local data of colors; with minSearchLength, textSearching, clearUnselected and forceSelection

+ +
+
+
+
+ + + +
+
+

{{color5}}

+
+
+
+
+

Events

Event triggering with onBlur and onFocus events.

diff --git a/src/components/completer-cmp.ts b/src/components/completer-cmp.ts index 747f680..08df46b 100644 --- a/src/components/completer-cmp.ts +++ b/src/components/completer-cmp.ts @@ -27,8 +27,8 @@ const COMPLETER_CONTROL_VALUE_ACCESSOR = { @@ -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(); @Output() public highlighted = new EventEmitter(); diff --git a/src/directives/ctr-input.ts b/src/directives/ctr-input.ts index 99504cb..8582c5c 100644 --- a/src/directives/ctr-input.ts +++ b/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 = 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);