正在创建剑道自动完成表单组件

Question

我想使用剑道自动完成，而不是选择/下拉菜单。当我尝试将select组件切换到剑道自动完成时，我将无法再使用option组件。我想知道如何更改它才能按预期工作。

不工作的剑道自动完成示例：

<div class="col-sm-12 col-md-4" *ngIf="showFaxNumberInput === true ">
<label class="col-sm-3 col-md-5" for="providerRoute">Exception Group</label>
<div class="col-sm-5 col-md-7 padding-adj">
<kendo-autocomplete 
formControlName="exceptionGroup" 
name="exceptionGroup" 
class="form-control input-xs"
>
<option *ngFor="let item of exceptionGroupList" [value]="item.Value">{{item.Text}}</option>
</kendo-autocomplete>
</div>
</div>

工作下拉示例：

<div class="col-sm-12 col-md-4" *ngIf="showFaxNumberInput === true ">
<label class="col-sm-3 col-md-5" for="providerRoute">Exception Group</label>
<div class="col-sm-5 col-md-7 padding-adj">
<select formControlName="exceptionGroup" name="exceptionGroup" class="form-control input-xs">
<option value="">Select</option>
<option *ngFor="let item of exceptionGroupList" [value]="item.Value">{{item.Text}}</option>
</select>
</div>

我可以很容易地删除带有占位符的第一个选项标记。但第二个选项标签是我遇到的问题。我在剑道自动完成标签中添加了ngFor，如下所示：

<kendo-autocomplete *ngFor="let item of exceptionGroupList" [value]="item.Value"
formControlName="exceptionGroup"
name="exceptionGroup"
class="form-control input-xs"
>
{{item.Text}}
</kendo-autocomplete>

但它只是反复创建了几个文本框。

谢谢

Answer 1

听起来你想要一个带过滤的组合框。当您键入值时，将过滤下面下拉列表中的筛选器。

文件：https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/filtering

Fiddle：https://codesandbox.io/s/exciting-hugle-tiuxh0?file=/src/app/app.component.ts:133-395

示例：

<kendo-combobox [data]="exceptionGroupList"
textField="Text"
valueField="Value"
[filterable]="true"
(filterChange)="handleFilter($event)">
</kendo-combobox>

exceptionGroupList: Array<{ Text: string; Value: number; }> = [
{ Text: 'Some Value', Value: 1 },
// ...
];
data: Array<{ Text: string; Value: number }>;
handleFilter(value) {
this.data = this.exceptionGroupList
.filter(item => item.Text.toLowerCase().indexOf(value.toLowerCase()) > -1);
}