angular - Angular Materials - 输入框中的下拉菜单

Question

使用 Angular 材料，我们正在尝试实现与 Bootstrapbutton with dropdowns组件相关的东西 - 即https://getbootstrap.com/docs/4.0/components/input-group/#buttons-with-dropdowns

更具体地说，它是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>

这是开始的东西（它包含一个选择） -

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

标签： angularmaterial-designangular-material-6

Answer 1

使用 and 的组合boostrap 4，mat-select我得到了我想要的东西。它只需要适当的样式。

<div class="input-group" style="margin: 15px 0 0 10px !important; ">
    <input type="text" id="basic_filter" #basicFilter placeholder="Search" class="form-control" value="{{searchOptions?.filter}}">
    <div class="input-group-append">
        <mat-select [(value)]="selected" class="pat-search" disableOptionCentering=true> 
            <mat-option value="Basic">Basic</mat-option>
            <mat-option value="Advanced">Advanced</mat-option>
        </mat-select>        
    </div>
    <mat-icon class="search-icon" matSuffix>arrow</mat-icon>
</div>