问角-总是显示自动完成面板

EN

<input #searchbar 
    (keydown.arrowDown)="arrowDownEvent(row, selectedRowIndex)" 
    (keydown.arrowUp)="arrowUpEvent(row, selectedRowIndex)"
    (keydown.enter)="submitSearch(searchbar.value)"
    (focus)="selectedRowIndex=0" (focusout)="selectedRowIndex=undefined"
    id="search-bar" placeholder="Search..."
    required type="search">

<table mat-table [dataSource]="results" style="background-color: rgba(32, 32, 32); width: 100%">

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let result"><span>{{result.name}}<span></td>
  </ng-container>

  <!--You can add as many ng-containers as there are columns in your autocompletion results -->

  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"
      id="result.{{row.index}}"
      [ngClass]="{'result': true, 'highlight': selectedRowIndex == row.index}"
      (click)="submitSearch(row.name)">
  </tr>

</table>

displayedColumns: string[] = ['name'];
selectedRowIndex: any = 0;

highlight(row: any){
    (<HTMLInputElement>document.getElementById("search-bar")).value = row.name;
    this.selectedRowIndex = row.index;
    (<HTMLInputElement>document.getElementById("result."+this.selectedRowIndex)).scrollIntoView({block: 'end'});
  }

arrowUpEvent(row: object, index: number){
  if (index > 0) {
    let nextRow = this.results[index - 1];
    this.highlight(nextRow);
  }
  else {
    let nextRow = this.results[this.results.length - 1];
    this.highlight(nextRow)
  }
}

arrowDownEvent(row: object, index: number){
  if (index < this.results.length - 1) {
    let nextRow = this.results[index + 1];
    this.highlight(nextRow);
  }
  else {
    let nextRow = this.results[0];
    this.highlight(nextRow)
  }
}

.result {
  background-color: rgba(32, 32, 32);
  cursor: pointer;
}

.result.highlight {
  background: rgb(25, 25, 25);
}

.result:hover {
  background: rgb(42, 42, 42);
}