diff --git a/ng2-components/ng2-alfresco-search/README.md b/ng2-components/ng2-alfresco-search/README.md
index 9bcff08f8e..7ba8d3b945 100644
--- a/ng2-components/ng2-alfresco-search/README.md
+++ b/ng2-components/ng2-alfresco-search/README.md
@@ -179,6 +179,7 @@ bootstrap(SearchDemo, [
**inputType**: {string} (optional) default "text". Type of the input field to render, e.g. "search" or "text" (default)
**expandable** {boolean} (optional) default true. Whether to use an expanding search control, if false then a regular input is used.
**autocomplete** {boolean} (optional) default true. Whether the browser should offer field auto-completion for the input field to the user.
+**autocompleteEnabled** {boolean} (optional) default true. Whether find-as-you-type suggestions should be offered for matching content items. Set to false to disable.
### Search results
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
index faedc3235a..868063b0f5 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
@@ -15,10 +15,13 @@
[(ngModel)]="searchTerm"
(focus)="onFocus($event)"
(blur)="onBlur($event)"
+ (keyup.escape)="onEscape($event)"
+ (keyup.arrowdown)="onArrowDown($event)"
aria-labelledby="searchLabel">
-
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.spec.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.spec.ts
index ba97dd2c8e..703c811f2b 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.spec.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.spec.ts
@@ -131,6 +131,80 @@ describe('AlfrescoSearchControlComponent', () => {
});
});
+ describe('Find as you type', () => {
+
+ let inputEl: HTMLInputElement;
+
+ beforeEach(() => {
+ inputEl = element.querySelector('input');
+ });
+
+ it('should display a find-as-you-type control by default', () => {
+ alfrescoSearchControlComponentFixture.detectChanges();
+ let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+ expect(autocomplete).not.toBeNull();
+ });
+
+ it('should make find-as-you-type control hidden initially', () => {
+ alfrescoSearchControlComponentFixture.detectChanges();
+ let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+ expect(autocomplete.classList.contains('active')).toBe(false);
+ });
+
+ it('should make find-as-you-type control visible when search box has focus', () => {
+ alfrescoSearchControlComponentFixture.detectChanges();
+ inputEl.dispatchEvent(new Event('focus'));
+ alfrescoSearchControlComponentFixture.detectChanges();
+ let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+ expect(autocomplete.classList.contains('active')).toBe(true);
+ });
+
+ it('should hide find-as-you-type results when the search box loses focus', (done) => {
+ alfrescoSearchControlComponentFixture.detectChanges();
+ inputEl.dispatchEvent(new Event('focus'));
+ inputEl.dispatchEvent(new Event('blur'));
+ window.setTimeout(() => {
+ alfrescoSearchControlComponentFixture.detectChanges();
+ let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+ expect(autocomplete.classList.contains('active')).toBe(false);
+ done();
+ }, 250);
+ });
+
+ it('should hide find-as-you-type results when escape key pressed', () => {
+ alfrescoSearchControlComponentFixture.detectChanges();
+ inputEl.dispatchEvent(new Event('focus'));
+ inputEl.dispatchEvent(new KeyboardEvent('keyup', {
+ key: 'Escape'
+ }));
+ alfrescoSearchControlComponentFixture.detectChanges();
+ let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+ expect(autocomplete.classList.contains('active')).toBe(false);
+ });
+
+ it('should make find-as-you-type control visible again when down arrow is pressed', () => {
+ alfrescoSearchControlComponentFixture.detectChanges();
+ inputEl.dispatchEvent(new Event('focus'));
+ inputEl.dispatchEvent(new KeyboardEvent('keyup', {
+ key: 'Escape'
+ }));
+ inputEl.dispatchEvent(new KeyboardEvent('keyup', {
+ key: 'ArrowDown'
+ }));
+ alfrescoSearchControlComponentFixture.detectChanges();
+ let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+ expect(autocomplete.classList.contains('active')).toBe(true);
+ });
+
+ it('should NOT display a find-as-you-type control when configured not to', () => {
+ alfrescoSearchControlComponentFixture.componentInstance.autocompleteEnabled = false;
+ alfrescoSearchControlComponentFixture.detectChanges();
+ let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+ expect(autocomplete).toBeNull();
+ });
+
+ });
+
describe('search submit', () => {
it('should fire a search when a term has been entered', () => {
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
index 5435cd67d0..b572b7f444 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
@@ -58,6 +58,9 @@ export class AlfrescoSearchControlComponent implements OnInit {
@ViewChild('searchInput', {}) searchInput: ElementRef;
+ @Input()
+ autocompleteEnabled = true;
+
@Input()
autocompleteSearchTerm = '';
@@ -146,4 +149,12 @@ export class AlfrescoSearchControlComponent implements OnInit {
}
}
+ onEscape(): void {
+ this.searchActive = false;
+ }
+
+ onArrowDown(): void {
+ this.searchActive = true;
+ }
+
}