选择后如何重置剑道自动完成中的文本

Posted 2023-05-07

【中文标题】选择后如何重置剑道自动完成中的文本

【英文标题】：How to reset the text in kendo autocomplete after selection

【发布时间】：2018-08-07 22:03:43

【问题描述】：

我正在使用 Angular 4 的剑道自动完成功能，我试图在从弹出窗口中选择值后清除自动完成框中的文本。

<div class="example-wrapper">
  <kendo-autocomplete [data]="listItems" [value]="country" 
  [placeholder]="'e.g. Andorra'" (valueChange)="locationValueChange($event)">
  </kendo-autocomplete>

  <div *ngFor="let location of selectedValues; let i = index;">
                location
            </div>
</div>




public listItems: Array<string> = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];


     public country: string = "Austria";

     public selectedValues: Array<string[]> = [];


     public locationValueChange(value: any): void 
       this.selectedValues.push(value);
       this.country='';
       console.log(this.country);
    

即使我将值字段设置为无。它仍然有数据在框中。 请提出任何想法来实现这一目标。 Plunker link of code

【参考方案1】：

这可以通过使用自动完成的reset 方法来实现。 (Reference)

您可以通过组件中的ViewChild 装饰器访问自动完成功能，并在每个valueChange 运行reset 方法。

*.component.html

 <kendo-autocomplete
      #autocomplete
      [data]="data"
      [value]="value" 
      (valueChange)="onValueChange($event)">
 </kendo-autocomplete>

*.component.ts

 @Component( ... )
 public class MyComponent 
      @ViewChild('autocomplete') autocomplete: AutoCompleteComponent;

      ...

      onValueChange(value: string)
          this.autocomplete.reset();
      

我还分叉了你的Plunker。