From f1c1909c04fe03c7c56309079942b5f5905376ae Mon Sep 17 00:00:00 2001 From: Rein Baarsma Date: Thu, 21 Apr 2016 12:22:43 +0200 Subject: [PATCH] feat(typeahead): show list of options on focuse when minLength=0 fixes #187, fixes #413 --- components/typeahead/readme.md | 2 +- components/typeahead/typeahead.directive.ts | 31 ++++++++++++++++++--- 2 files changed, 28 insertions(+), 5 deletions(-) diff --git a/components/typeahead/readme.md b/components/typeahead/readme.md index 5bb92b1bdf..d093c1370f 100644 --- a/components/typeahead/readme.md +++ b/components/typeahead/readme.md @@ -40,7 +40,7 @@ export class Typeahead implements OnInit { - `ngModel` (`string`) - binds to string user's input - `typeahead` (`any`) - options source, can be Array of strings or objects or function that return Promise for external matching process - - `typeaheadMinLength` (`?number=1`) - minimal no of characters that needs to be entered before typeahead kicks-in. Must be greater than or equal to 1. + - `typeaheadMinLength` (`?number=1`) - minimal no of characters that needs to be entered before typeahead kicks-in. When set to 0, typeahead shows on focus with full list of options (limited as normal by typeaheadOptionsLimit) - `typeaheadWaitMs` (`?number=0`) - minimal wait time after last character typed before typeahead kicks-in - `typeaheadOptionsLimit` (`?number=20`) - maximum length of options items list - `typeaheadOptionField` (`?string`) - name of field in array of states that contain options as objects, we use array item as option in case of this field is missing diff --git a/components/typeahead/typeahead.directive.ts b/components/typeahead/typeahead.directive.ts index 6192c18c44..6d26bd862f 100644 --- a/components/typeahead/typeahead.directive.ts +++ b/components/typeahead/typeahead.directive.ts @@ -21,7 +21,7 @@ export class Typeahead implements OnInit { @Output() public typeaheadOnSelect:EventEmitter<{item:any}> = new EventEmitter(false); @Input() public typeahead:any; - @Input() public typeaheadMinLength:number; + @Input() public typeaheadMinLength:number = void 0; @Input() public typeaheadWaitMs:number; @Input() public typeaheadOptionsLimit:number; @Input() public typeaheadOptionField:string; @@ -92,7 +92,7 @@ export class Typeahead implements OnInit { this.debouncer(); } - if (this.typeaheadAsync === false) { + if (!this.typeaheadAsync) { this.processMatches(); this.finalizeAsyncCall(); } @@ -102,6 +102,22 @@ export class Typeahead implements OnInit { } } + @HostListener('focus', ['$event.target']) + protected onFocus():void { + if (this.typeaheadMinLength === 0) { + this.typeaheadLoading.emit(true); + + if (this.typeaheadAsync === true) { + this.debouncer(); + } + + if (!this.typeaheadAsync) { + this.processMatches(); + this.finalizeAsyncCall(); + } + } + } + @HostListener('blur', ['$event.target']) protected onBlur():void { console.log('blur') @@ -147,7 +163,7 @@ export class Typeahead implements OnInit { public ngOnInit():void { this.typeaheadOptionsLimit = this.typeaheadOptionsLimit || 20; - this.typeaheadMinLength = this.typeaheadMinLength || 1; + this.typeaheadMinLength = this.typeaheadMinLength === void 0 ? 1 : this.typeaheadMinLength; this.typeaheadWaitMs = this.typeaheadWaitMs || 0; // async should be false in case of array @@ -290,6 +306,13 @@ export class Typeahead implements OnInit { return; } + if (!this.cd.model) { + for (let i = 0; i < Math.min(this.typeaheadOptionsLimit, this.typeahead.length); i++) { + this._matches.push(this.typeahead[i]); + } + return; + } + // If singleWords, break model here to not be doing extra work on each // iteration let normalizedQuery = (this.typeaheadLatinize @@ -351,7 +374,7 @@ export class Typeahead implements OnInit { this.typeaheadNoResults.emit(this.cd.model.toString().length >= this.typeaheadMinLength && this.matches.length <= 0); - if (this.cd.model.toString().length <= 0 || this._matches.length <= 0) { + if (this._matches.length <= 0) { this.hide(); return; }