Angular bootstrap 4选择带有搜索过滤器

Question

我在Angular中有一个项目，我正在使用Bootstrap 4。

我有一个选择：

<select>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>

当选择打开时，我需要一些搜索过滤器或类似的。

我该怎么做？

Answer 1

您必须使用下拉选择器创建自定义输入。例如：

<div>
<input type="text" (keyup)="onSeachDropdownValue($event)"/>
<div class="dropdown-selector">
<div class="dropdown-selector-option" *ngFor="let option of searchedOptions" (click)="onSelectDropdownValue(option)">{{option}}</div>
</div>
</div>

在你的打字稿中：

options = ['option1', 'option2', 'option3'];
searchedOptions = [];
onSeachDropdownValue($event) {
const value = $event.target.value;
searchedOptions = options.filter(option => option.includes(value));
}
onSelectDropdownValue(option) {
// Do something with selected value
}

您可以使用双向绑定来使用所选选项和所需方法(tamplate或reactive方法(填充输入。

希望它能帮助