angular - Angular Materials - 入力ボックス内のドロップダウン

Question

button with dropdownsAngular マテリアルを使用して、Bootstrapコンポーネントに関連する何かを達成しようとしています。

より具体的には、検索オプションをInput Field組み合わせた検索です。dropdownワイヤーフレームで見るとこんな感じ。

つまり、白い下向き矢印をクリックすると

これは、「マテリアル選択」だけを使用して彼らが思いついたものです。ただし、実際の問題は、入力フィールドがドロップダウンと組み合わされている場所で実行できるかということです。

.search-form {
    min-width: 150px;
    max-width: 500px;
    width: 100%;
    padding-left:10px;
    padding-right:10px;
    overflow-y:auto;
  }
  
.search-full-width {
width: 100%;
}

:host ::ng-deep .mat-tab-body-content{
  min-height:500px;
  padding:5px;
}
.pad-left {
  margin-left: 5px; 
}
.mat-select-panel {
  background-color: blue;
}

<mat-form-field appearance="outline" class="search-full-width">
    <mat-select panelClass="mat-select-panel" [(value)]="selected"  disableOptionCentering=true> 
          <mat-option value="Basic">Basic</mat-option>
          <mat-option value="Advanced">Advanced</mat-option>
    </mat-select>
    <mat-icon matSuffix>search</mat-icon>
</mat-form-field>

ここから始めましょう (select が含まれています) -

https://stackblitz.com/edit/angular-mat-select-drpdwn