如何在angular2或更高版本的下拉菜单下使用带有搜索过滤器的搜索框

我在一个项目中工作，我被困在点，我已经创建了一个动态下拉菜单，这是从一些api获得25-30个选项，我想要一个搜索框与过滤器在完全相同的格式如下所示。我有搜索过滤器逻辑，这是工作正常，但我无法把搜索框在下面的格式。这里是链接

现在我需要三样东西

加载页面时，defualt应选择某些选项

当我打开我的下拉菜单，它应该有一个搜索框和下面 搜索框，它应该有所有的链接或选项

当我选择任何选项时，它应该被选中，并且可以在 标题如下所示。 下面是plunkr链接，与我想要选择标签的方式相同

预期的

我正在附上代码
app.component.html

<select (change)="selectChangeHandler($event)">
  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  <option *ngFor="let order of orders; " [ngValue]="order">
                  {{order.name}}
  </option>
</select>
<router-outlet></router-outlet>

---

如上所示，我正在尝试将搜索框放置在选择菜单中，但无法获取它。

尝试将角度材质

mat select

与ngx mat select search一起搜索

以下是

ngx mat select search

NPM链接：

以下链接中有一些示例：

---

你到底有什么问题？使用此选项和选择菜单是您的要求。不是吗？我正在从事liv项目，它需要与此链接中显示的select标记格式完全相同的格式

orders=[
    { id: '1', name: 'order 1' },
    { id: '2', name: 'order 2' },
    { id: '3', name: 'order 3' },
    { id: '4', name: 'order 4' }
  ]

  selectedDay: string = '';

  selectChangeHandler (event: any) {
    this.selectedDay = event.target.value;
  }