CODEWITHSUNDEEP
angularkendo-uiautocompletekendo-ui-angular2
Pandiyan Cool
Pandiyan Cool

Reputation: 6565

How to reset the text in kendo autocomplete after selection

I'm using Kendo autocomplete with angular 4, I'm trying to clear the text in autocomplete box after selecting the value from popup.

<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);
    }

Even when I'm setting value field to none. Its still having the data in box. Please suggest any idea to achieve this. Plunker link of code

Upvotes: 2

Views: 4088

Answers (1)

Philipp
Philipp

Reputation: 1884

This can be achieved by utilizing the reset method of the auto-complete. (Reference)

You can access to the auto-complete via the ViewChild decorator in your component, and the run the reset method every valueChange.

*.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();
      }
}

I've also forked your Plunker.

Upvotes: 5

Related Questions