vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add debounce to search

Browse source
This commit is contained in:
Joseph Schorr 2017-05-03 16:00:50 -04:00
parent 25d8b6ec02
commit 481d9b2394
2 changed files with 18 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

1
static/js/directives/ui/search-box/search-box.component.html
View file

@ -49,6 +49,7 @@
<input class="form-control" type="text" placeholder="search" <input class="form-control" type="text" placeholder="search"
ng-model="$ctrl.enteredQuery" ng-model="$ctrl.enteredQuery"
typeahead="$ctrl.onTypeahead($event)" typeahead="$ctrl.onTypeahead($event)"
ta-debounce="250"
ta-display-key="name" ta-display-key="name"
ta-suggestion-tmpl="search-result-template" ta-suggestion-tmpl="search-result-template"
ta-clear-on-select="$ctrl.clearOnSearch" ta-clear-on-select="$ctrl.clearOnSearch"

20
static/js/directives/ui/typeahead/typeahead.directive.ts
View file

@ -13,16 +13,19 @@ export class TypeaheadDirective implements AfterContentInit {
@Input('taDisplayKey') displayKey: string = ''; @Input('taDisplayKey') displayKey: string = '';
@Input('taSuggestionTmpl') suggestionTemplate: string = ''; @Input('taSuggestionTmpl') suggestionTemplate: string = '';
@Input('taClearOnSelect') clearOnSelect: boolean = false; @Input('taClearOnSelect') clearOnSelect: boolean = false;
@Input('taDebounce') debounce: number = 250;
@Output('taSelected') selected = new EventEmitter<any>(); @Output('taSelected') selected = new EventEmitter<any>();
@Output('taEntered') entered = new EventEmitter<any>(); @Output('taEntered') entered = new EventEmitter<any>();
private itemSelected: boolean = false; private itemSelected: boolean = false;
private existingTimer: Promise = null;
constructor(@Inject('$element') private $element: ng.IAugmentedJQuery, constructor(@Inject('$element') private $element: ng.IAugmentedJQuery,
@Inject('$compile') private $compile: ng.ICompileService, @Inject('$compile') private $compile: ng.ICompileService,
@Inject('$scope') private $scope: ng.IScope, @Inject('$scope') private $scope: ng.IScope,
@Inject('$templateRequest') private $templateRequest: ng.ITemplateRequestService) { @Inject('$templateRequest') private $templateRequest: ng.ITemplateRequestService,
@Inject('$timeout') private $timeout: ng.ITimeoutService) {
} }
public ngAfterContentInit(): void { public ngAfterContentInit(): void {
@ -52,12 +55,23 @@ export class TypeaheadDirective implements AfterContentInit {
templates: templates, templates: templates,
display: this.displayKey, display: this.displayKey,
source: (query, results, asyncResults) => { source: (query, results, asyncResults) => {
this.typeahead.emit({'query': query, 'callback': asyncResults}); this.debounceQuery(query, asyncResults);
this.itemSelected = false;
}, },
}); });
} }
private debounceQuery(query: string, asyncResults: Function): void {
if (this.existingTimer) {
this.$timeout.cancel(this.existingTimer);
this.existingTimer = null;
}
this.existingTimer = this.$timeout(() => {
this.typeahead.emit({'query': query, 'callback': asyncResults});
this.itemSelected = false;
}, this.debounce);
}
@HostListener('keyup', ['$event']) @HostListener('keyup', ['$event'])
public onKeyup(event: JQueryKeyEventObject): void { public onKeyup(event: JQueryKeyEventObject): void {
if (!this.itemSelected && event.keyCode == 13) { if (!this.itemSelected && event.keyCode == 13) {