[HIMA-11] finished porduct search autocomplete

src/app/core/store/state/autocomplete.state.ts

@@ -28,7 +28,7 @@ export class AutocompleteState {
             take: 1
         }).subscribe(
             (result: PagedApiResponse<string>) => {
-                const response = result.result[0];
+                const response = result.result[1];
                 ctx.patchState({
                     ...state,
                     result: response

src/app/modules/article-search/components/text-search/text-search.component.html

@@ -10,7 +10,9 @@
         #searchInput
         (input)="createTab()"
         (search)="search($event)"
+        (inputChange)="autocomplete($event)"
         placeholder="Titel, Autor, Verlag, Schlagwort, ..."
+        autocompletePlaceHolder="{{autocompletePlaceHolder}}"
       ></app-search>
     </div>
     <div *ngIf="searchParams">

src/app/modules/article-search/components/text-search/text-search.component.ts

@@ -27,6 +27,8 @@ import {
 import { Router } from '@angular/router';
 import { Select, Store } from '@ngxs/store';
 import { FilterState } from 'src/app/core/store/state/filter.state';
+import { AutocompleteState } from 'src/app/core/store/state/autocomplete.state';
+import { LoadAutocomplete } from 'src/app/core/store/actions/autocomplete.actions';
 
 @Component({
   selector: 'app-text-search',
@@ -41,8 +43,11 @@ export class TextSearchComponent implements OnInit, AfterViewInit {
   products$: Observable<Product[]>;
   products: Product[];
   filters: Filter[];
+  timer: any;
+  autocompletePlaceHolder = '';
   @Select(ProcessState.getProcesses) processes$: Observable<Process[]>;
   @Select(FilterState.getSelectedFilters) filters$: Observable<Filter[]>;
+  @Select(AutocompleteState.getAutocompleteResults) autocompleteResults: Observable<string>;
   processes: Process[];
 
   @Input()
@@ -50,7 +55,7 @@ export class TextSearchComponent implements OnInit, AfterViewInit {
 
   @ViewChild('searchInput') searchInput: SearchComponent;
 
-  constructor(private store: Store, private router: Router) {}
+  constructor(private store: Store, private router: Router) { }
 
   ngOnInit() {
     this.loadRecentArticles();
@@ -144,4 +149,22 @@ export class TextSearchComponent implements OnInit, AfterViewInit {
       this.createProcess();
     }
   }
+
+  autocomplete(search: string) {
+    if (search.length > 0) {
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+      this.timer = setTimeout(() => {
+        this.store.dispatch(new LoadAutocomplete(search));
+        this.autocompleteResults.subscribe(
+          (res: string) => {
+            this.autocompletePlaceHolder = res;
+          }
+        );
+      }, 1);
+    } else {
+      this.autocompletePlaceHolder = '';
+    }
+  }
 }

src/app/shared/components/search-input/search-input.component.scss

@@ -20,6 +20,7 @@
 .search-box {
   width: 100%;
   height: 49px;
+  position: relative;
   outline: none;
   border: none;
   background-color: transparent;
@@ -30,6 +31,26 @@
   color: black;
   font-weight: bold;
   font-size: 21px;
+  z-index: 7;
+}
+
+.autocomplete {
+  position: relative;
+  left: 21px;
+  top: -57px;
+  z-index: 1;
+  color: silver;
+  font-weight: bold;
+  font-size: 21px;
+  width: 180%;
+  height: 49px;
+  outline: none;
+  border: none;
+}
+
+.autocomplete-wrapper {
+  overflow: inherit;
+  position: absolute;
 }
 
 .search-icon {

src/app/shared/components/search-input/search-input.component.ts

@@ -7,10 +7,6 @@ import {
   ElementRef,
   EventEmitter
 } from '@angular/core';
-import { Store, Select } from '@ngxs/store';
-import { LoadAutocomplete } from 'src/app/core/store/actions/autocomplete.actions';
-import { AutocompleteState } from 'src/app/core/store/state/autocomplete.state';
-import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-search',
@@ -25,7 +21,6 @@ import { Observable } from 'rxjs';
         type="text"
         #search
       />
-      <span *ngIf="error" class="error-message">{{ error }}</span>
       <img
         (click)="clear()"
         *ngIf="input.length"
@@ -38,6 +33,9 @@ import { Observable } from 'rxjs';
         src="/assets/images/search.svg"
       />
     </div>
+    <div class="autocomplete-wrapper">
+      <input type="text" class="autocomplete" disabled value="{{autocompletePlaceHolder}}" />
+    </div>
   `,
   styleUrls: ['./search-input.component.scss']
 })
@@ -45,13 +43,12 @@ export class SearchComponent implements OnInit {
   @Input() placeholder = '';
   @Input() input = '';
   @Input() error = '';
+  @Input() autocompletePlaceHolder = '';
   @Output() inputChange = new EventEmitter();
   @Output() search = new EventEmitter();
   @Output() keypress = new EventEmitter();
   @ViewChild('search') searchInput: ElementRef;
-  @Select(AutocompleteState.getAutocompleteResults) autocompleteResults: Observable<string>;
-  constructor(private store: Store) { }
-  statingTime = new Date(2018, 1, 1);
+  constructor() { }
 
   ngOnInit() {
   }
@@ -63,22 +60,6 @@ export class SearchComponent implements OnInit {
   change(text: string) {
     this.input = text;
     this.inputChange.emit(text);
-    if (text.length > 0) {
-      const lastSearchTime = this.statingTime.getTime();
-      const date = new Date();
-      const currSearchTime = date.getTime();
-      const timeDiff = Math.abs(currSearchTime - lastSearchTime);
-      const diffSeconds = Math.ceil(timeDiff / 1000);
-      console.log(diffSeconds);
-      if (diffSeconds < 1.1) {
-        return;
-      }
-      this.statingTime = date;
-      this.store.dispatch(new LoadAutocomplete(text));
-      this.autocompleteResults.subscribe(
-        (res: string) => console.log(res)
-      );
-    }
   }
 
   clear() {