Initial search as you type capability

Refs #173

ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.html

@@ -0,0 +1,8 @@
+<table *ngIf="results && results.length && searchTerm" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
+    <tbody>
+    <tr *ngFor="#result of results; #idx = index">
+        <td>{{result.entry.name}}</td>
+    </tr>
+    </tbody>
+</table>
+<p *ngIf="errorMessage">{{ 'SEARCH.RESULTS.ERROR' | translate:{errorMessage: errorMessage} }}</p>

ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts

@@ -0,0 +1,104 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ElementRef, Input, OnChanges, Renderer } from 'angular2/core';
+import { AlfrescoService } from './../services/alfresco.service';
+
+import { AlfrescoPipeTranslate, AlfrescoTranslationService } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
+
+declare let __moduleName: string;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'alfresco-search-autocomplete',
+    styles: [
+        `:host {
+            position: absolute;
+            z-index: 1;
+            display: none;
+            color: #555;
+        }
+        :host table {
+            width: 300px;
+        }
+        :host .mdl-data-table tbody tr {
+            height: 32px;
+        }
+        :host .mdl-data-table td {
+            height: 32px;
+            padding: 8px;
+            text-align: left;
+        }`
+    ],
+    templateUrl: './alfresco-search-autocomplete.component.html',
+    providers: [AlfrescoService],
+    pipes: [AlfrescoPipeTranslate]
+})
+export class AlfrescoSearchAutocompleteComponent implements OnChanges {
+
+    @Input()
+    searchTerm: string = '';
+
+    results: any;
+
+    errorMessage;
+
+    route: any[] = [];
+
+    constructor(
+        private _alfrescoService: AlfrescoService,
+        private translate: AlfrescoTranslationService,
+        private el: ElementRef,
+        private renderer: Renderer
+    ) {
+        console.log('Autocomplete constructor');
+        translate.addTranslationFolder('node_modules/ng2-alfresco-search');
+        this.results = null;
+    }
+
+    ngOnChanges(changes) {
+        console.log('Autocomplete changes');
+        if (this.searchTerm.length >= 3) {
+            this.displaySearchResults(this.searchTerm);
+            this.renderer.setElementStyle(this.el.nativeElement, 'display', 'block');
+        } else {
+            this.renderer.setElementStyle(this.el.nativeElement, 'display', 'none');
+        }
+    }
+
+    /**
+     * Loads and displays search results
+     * @param searchTerm Search query entered by user
+     */
+    displaySearchResults(searchTerm) {
+        if (searchTerm !== null) {
+            this._alfrescoService
+                .getLiveSearchResults(searchTerm)
+                .subscribe(
+                    results => {
+                        this.results = results.list.entries
+                        this.errorMessage = null;
+                    },
+                    error => {
+                        this.results = null;
+                        this.errorMessage = <any>error;
+                    }
+                );
+        }
+    }
+
+}

ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html

@@ -9,3 +9,4 @@
         </div>
     </div>
 </form>
+<alfresco-search-autocomplete [searchTerm]="autocompleteSearchTerm"></alfresco-search-autocomplete>

ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts

@@ -17,10 +17,11 @@
 
 import { Control, Validators } from 'angular2/common';
 import { Component, Input, Output, EventEmitter, AfterViewInit } from 'angular2/core';
-import { AlfrescoService } from './../services/alfresco.service';
 
 import { AlfrescoPipeTranslate, AlfrescoTranslationService } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
 
+import { AlfrescoSearchAutocompleteComponent } from './alfresco-search-autocomplete.component';
+
 declare let __moduleName: string;
 declare var componentHandler: any;
 
@@ -30,7 +31,7 @@ declare var componentHandler: any;
     styles: [
     ],
     templateUrl: './alfresco-search-control.component.html',
-    providers: [AlfrescoService],
+    directives: [AlfrescoSearchAutocompleteComponent],
     pipes: [AlfrescoPipeTranslate]
 })
 export class AlfrescoSearchControlComponent implements AfterViewInit {
@@ -52,6 +53,9 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
 
     searchControl: Control;
 
+    @Input()
+    autocompleteSearchTerm = '';
+
     constructor(private translate: AlfrescoTranslationService) {
 
         this.searchControl = new Control(
@@ -59,6 +63,12 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
             Validators.compose([Validators.required, Validators.minLength(3)])
         );
 
+        this.searchControl.valueChanges.debounceTime(400).distinctUntilChanged().subscribe(
+            (value: string) => {
+                this.autocompleteSearchTerm = value;
+            }
+        );
+
         translate.addTranslationFolder('node_modules/ng2-alfresco-search');
     }