Value Binding

The selected value of the AutoComplete can only be a string value.

To set the value, use the [value] property binding of the AutoComplete or the ngModel binding. When the value changes, the AutoComplete triggers the valueChange event.

  • To define multiple values, use the MultiSelect. For more information, refer to its overview article.
  • To define selected values as data of the primitive (strings and numbers) or complex (objects) type, use the ComboBox. For more information, refer to its overview article.
  • The AutoComplete does not support values which contain \n new line characters. The regular input HTML DOM element which the AutoComplete uses internally treats \n as a regular whitespace. Therefore, when the component compares the value of the input element with the data item that is selected by the user, the two values differ, the value of the input element is actually not present in the data of the component, and the AutoComplete does not recognize it. To handle such issues, map the incoming data so that it contains regular whitespaces only.

The following example demonstrates how to select an item in the AutoComplete.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <kendo-autocomplete [data]="listItems" [value]="country" [placeholder]="'e.g. Andorra'">
      </kendo-autocomplete>
    </div>
   `
})
class AppComponent {
     public listItems: Array<string> = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];

     public country: string = "Austria";
}

In this article