add limit by

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

@@ -4,7 +4,8 @@
   placeholder="Query" 
   [formControl]="query"
   [matAutocomplete]="auto" 
-  (keyup)="onKey($event)"/>
+  (keyup)="onKey($event)"
+  (focus)="onKey($event)"/>
 <mat-autocomplete 
   #auto="matAutocomplete" 
   [displayWith]="displaySuggestion"

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

@@ -0,0 +1,12 @@
+.mat-option {
+  /*height: 1.5em;
+  line-height: 1.5em;
+  /**/
+}
+
+#query-autocomplete-input {
+  border: solid 1px #ccc;
+  border-radius: 5px;
+  box-sizing: border-box;
+  padding: 5px;
+}

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

@@ -11,7 +11,7 @@ import { PlotService, PlotType, AutocompleteResult, Suggestion } from '../plot.s
 })
 export class QueryAutocompleteComponent implements OnInit {
 
-  @Input() query = new FormControl();
+  @Input() query = new FormControl('');
 
   suggestions = new FormControl();