diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 46b278e92..3a7ee4e21 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -33,7 +33,8 @@ import { BreadcrumbsState } from './core/store/state/breadcrumbs.state';
 import { FilterState } from './core/store/state/filter.state';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { SharedModule } from './shared/shared.module';
-const states = [FeedState, ProcessState, BreadcrumbsState, FilterState];
+import { AutocompleteState } from './core/store/state/autocomplete.state';
+const states = [FeedState, ProcessState, BreadcrumbsState, FilterState, AutocompleteState];
 
 export function _configInitializer(conf: ConfigService) {
   // load config from /assets/config.json
diff --git a/src/app/core/mappings/product.mapping.ts b/src/app/core/mappings/product.mapping.ts
index fecfbcbdf..738e7f18d 100644
--- a/src/app/core/mappings/product.mapping.ts
+++ b/src/app/core/mappings/product.mapping.ts
@@ -45,7 +45,7 @@ export class ProductMapping {
             err: '',
             category: item.pr.productGroup,
             icon: '',
-            notAvailableReason: itemsInStock === 0 ? 'Not in stock' : '',
+            notAvailableReason: itemsInStock === 0 ? '' : '',
             publisher: item.pr.manufacturer,
             recommandation: false,
             serial: item.pr.serial,
diff --git a/src/app/core/store/actions/autocomplete.actions.ts b/src/app/core/store/actions/autocomplete.actions.ts
new file mode 100644
index 000000000..5b00a2ea0
--- /dev/null
+++ b/src/app/core/store/actions/autocomplete.actions.ts
@@ -0,0 +1,7 @@
+export const LOAD_PRODUCT_SEARCH_AUTOCOMPLETE = '[AUTOCOMPLETE] Load product';
+
+export class LoadAutocomplete {
+    static readonly type = LOAD_PRODUCT_SEARCH_AUTOCOMPLETE;
+
+    constructor(public payload: string) {}
+}
diff --git a/src/app/core/store/state/autocomplete.state.ts b/src/app/core/store/state/autocomplete.state.ts
new file mode 100644
index 000000000..49e0d02c6
--- /dev/null
+++ b/src/app/core/store/state/autocomplete.state.ts
@@ -0,0 +1,39 @@
+import { State, Selector, Action, StateContext } from '@ngxs/store';
+import { CatSearchService, PagedApiResponse, AutocompleteTokenDTO } from 'cat-service';
+import { LoadAutocomplete } from '../actions/autocomplete.actions';
+
+export class AutocompleteStateModel {
+    result: string;
+}
+
+@State<AutocompleteStateModel>({
+    name: 'autocomplete',
+    defaults: {
+        result: ''
+    }
+})
+export class AutocompleteState {
+    constructor(private service: CatSearchService) {}
+
+    @Selector()
+    static getAutocompleteResults(state: AutocompleteStateModel) {
+        return state.result;
+    }
+
+    @Action(LoadAutocomplete)
+    load(ctx: StateContext<AutocompleteStateModel>, { payload }: LoadAutocomplete) {
+        const state = ctx.getState();
+        this.service.complete(<AutocompleteTokenDTO>{
+            input: payload,
+            take: 1
+        }).subscribe(
+            (result: PagedApiResponse<string>) => {
+                const response = result.result[0];
+                ctx.patchState({
+                    ...state,
+                    result: response
+                });
+            }
+        );
+    }
+}
diff --git a/src/app/shared/components/search-input/search-input.component.ts b/src/app/shared/components/search-input/search-input.component.ts
index afa3dfd7a..9541e6a48 100644
--- a/src/app/shared/components/search-input/search-input.component.ts
+++ b/src/app/shared/components/search-input/search-input.component.ts
@@ -7,6 +7,10 @@ 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',
@@ -45,9 +49,12 @@ export class SearchComponent implements OnInit {
   @Output() search = new EventEmitter();
   @Output() keypress = new EventEmitter();
   @ViewChild('search') searchInput: ElementRef;
-  constructor() {}
+  @Select(AutocompleteState.getAutocompleteResults) autocompleteResults: Observable<string>;
+  constructor(private store: Store) { }
+  statingTime = new Date(2018, 1, 1);
 
-  ngOnInit() {}
+  ngOnInit() {
+  }
 
   focus() {
     this.searchInput.nativeElement.focus();
@@ -56,6 +63,22 @@ 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() {