<div class="search-container">
  <div class="searchbox">
    <form [formGroup]="fgSearch">
      <mat-form-field floatLabel="never">
        <mat-label>{{ 'room.searchRoomByName' | ucapI18n }}</mat-label>
        <input
          matInput
          #searchWordInput
          type="text"
          maxlength="20"
          placeholder="{{ 'room.searchRoomByName' | ucapI18n }}"
          formControlName="searchInput"
          [matAutocomplete]="auto"
          (keydown.enter)="onKeyDownEnter($event, searchWordInput.value)"
        />
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option
            *ngFor="let filteredRecommendedWord of filteredRecommendedWordList"
            [value]="filteredRecommendedWord"
          >
            {{ filteredRecommendedWord }}
          </mat-option>
        </mat-autocomplete>
        <button
          mat-button
          matSuffix
          mat-icon-button
          aria-label="Clear"
          (click)="searchWordInput.value = ''; onClickCancel()"
        >
          <mat-icon>close</mat-icon>
        </button>
        <mat-icon matSuffix>search</mat-icon>
      </mat-form-field>
    </form>
  </div>
</div>
