Reputation: 1025
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. 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:
<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
Upvotes: 0
Views: 639
Reputation: 6131
It sounds like you want want a ComboBox with filtering. 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:
<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);
}
Upvotes: 1