initial version of the query autocompletion

Missing features at this point:
1. No suggestions when the input gets the focus.
2. Suggestions are not shown after selecting a suggestion.

pdb-js/src/app/query-autocomplete/query-autocomplete.component.html

@@ -0,0 +1,16 @@
+<input matInput 
+  type="text"
+  id="query-autocomplete-input"
+  placeholder="Query" 
+  [formControl]="query"
+  [matAutocomplete]="auto" 
+  (keyup)="onKey($event)"/>
+<mat-autocomplete 
+  #auto="matAutocomplete" 
+  [displayWith]="displaySuggestion"
+  >
+    <mat-option *ngFor="let suggestion of filteredSuggestions | async" 
+      [value]="suggestion">
+      {{suggestion.value}}
+    </mat-option>
+  </mat-autocomplete>

pdb-js/src/app/query-autocomplete/query-autocomplete.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QueryAutocompleteComponent } from './query-autocomplete.component';
+
+describe('QueryAutocompleteComponent', () => {
+  let component: QueryAutocompleteComponent;
+  let fixture: ComponentFixture<QueryAutocompleteComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ QueryAutocompleteComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QueryAutocompleteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit, Input } from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {Observable} from 'rxjs';
+import {startWith, map} from 'rxjs/operators';
+import { PlotService, PlotType, AutocompleteResult, Suggestion } from '../plot.service';
+
+@Component({
+  selector: 'pdb-query-autocomplete',
+  templateUrl: './query-autocomplete.component.html',
+  styleUrls: ['./query-autocomplete.component.scss']
+})
+export class QueryAutocompleteComponent implements OnInit {
+
+  @Input() query = new FormControl();
+
+  suggestions = new FormControl();
+    
+  filteredSuggestions: Observable<Suggestion[]>; 
+  
+  constructor(private plotService: PlotService) {}
+
+  ngOnInit() {
+    this.filteredSuggestions = this.suggestions.valueChanges.pipe(
+      map(value => value)
+    );
+  }
+  
+  onKey(event: any) {
+    const that = this;
+    
+    console.log(event);
+    if (event.key == "ArrowDown" || event.key == "ArrowUp"){
+      return;
+    }
+    const query = typeof this.query.value == "string" 
+      ? this.query.value
+      : this.query.value.newQuery; 
+    const caretIndex = event.srcElement.selectionStart +1;
+    
+    this.plotService
+      .autocomplete(query, caretIndex)
+      .subscribe(
+        (data: AutocompleteResult) => {// success path
+          console.log(JSON.stringify(data.proposals));
+          that.suggestions.setValue(data.proposals);
+        }, 
+        error => console.log(error)
+      );
+  }
+  
+  displaySuggestion(suggestion?: Suggestion): string | undefined {
+    //console.log("suggestion: "+JSON.stringify(suggestion));
+    return suggestion ? suggestion.newQuery : undefined;
+  }
+}