[英]Creating a kendo-autocomplete form component
I'd like to use kendo-autocomplete rather than a select/dropdown menu.我想使用剑道自动完成而不是选择/下拉菜单。 When I try to switch the select component out for kendo-autocomplete, I am no longer able to use the option component.
当我尝试将 select 组件切换为剑道自动完成功能时,我不再能够使用选项组件。 I am wondering how I can change this for it to work as intended.
我想知道如何更改它以使其按预期工作。
Not working kendo-autocomplete example:不工作的剑道自动完成示例:
<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>
Working drop down example:工作下拉示例:
<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>
I can remove the first option tag with a placeholder easily.我可以轻松地删除带有占位符的第一个选项标签。 But the second option tag is what I am having trouble with.
但是第二个选项标签是我遇到的麻烦。 I added the ngFor into the kendo-autocomplete tag like this:
我将 ngFor 添加到 kendo-autocomplete 标记中,如下所示:
<kendo-autocomplete *ngFor="let item of exceptionGroupList" [value]="item.Value"
formControlName="exceptionGroup"
name="exceptionGroup"
class="form-control input-xs"
>
{{item.Text}}
</kendo-autocomplete>
But it just iteratively created several text boxes.但它只是迭代地创建了几个文本框。
Thank you谢谢
It sounds like you want want a ComboBox with filtering.听起来您想要一个带过滤功能的 ComboBox。 As you type in the value, the filters in the dropdown below are filtered.
当您输入值时,下面下拉列表中的过滤器将被过滤。
Documentation: 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 Example: Documentation: 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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.