自动完成数据绑定

本文解释了向AutoComplete组件提供数据的不同方法、与数据绑定相关的属性及其结果。关键要求是为建议提供一个字符串字段。

有关值绑定和数据绑定的详细信息，以及它们之间的区别，请参见值绑定与数据绑定篇文章。

绑定数据有两种关键方法:

• 原始类型
• 模型

还有一些注意事项记住。

如果您正在从描述下拉项的视图模型中寻找更多字段，而不仅仅是价值，请参阅从下拉菜单中获取模型KB文章和OnChange事件。

您可能还想查看/加入讨论并为此请求投票:将下拉列表值绑定到复杂模型

原始类型

的简单集合，可以对自动完成进行数据绑定字符串数据。当您有一个可供用户选择的具体选项列表时，它们的字符串表示通常适合显示，并且不需要特殊的模型。

要绑定自动完成，您需要:

1. 提供一个IEnumerable <字符串>对其数据财产,
2. 点的价值的参数。字符串字段。

@*绑定IEnumerable*@用户输入1:@TheValue 
  
用户输入2:@ secondvalue 
  @code{string TheValue {get;设置;} List建议{get;设置;} = new List {"first"， "second"， "third"};字符串SecondValue {get;设置;} string[] arrayrecommendations = new string[] {"one"， "two"， "three"};｝

绑定到模型

您可以将AutoComplete绑定到应用程序中的模型。当你已经有了某种形式的数据，而不需要准备一个单独的建议集合时，这很有用。

将AutoComplete绑定到一个模型:

1. 填充它数据属性，并在下拉列表中使用所需项的集合
2. 设置ValueField指向包含建议的字符串数据的模型的对应名称
3. 点的价值的参数。字符串视图模型中的字段。

@TheValue 
  @code{string TheValue {get;设置;} List< recommendations model > recommendations {get;设置;} = new List< advistionsmodel > {new advistionsmodel {Suggestion = "first"， SomeOtherField = 1}， new建议书模型{Suggestion = "second"， SomeOtherField = 2}， new建议书模型{Suggestion = "third"， SomeOtherField = 3}};公共类advistionsmodel设置;}//自动补全只需要字符串字段public int SomeOtherField {get;设置;}}}

注意事项

参考

AutoComplete组件是通用的，它的类型取决于您提供的模型的类型数据收集。

@*绑定到原语集合时的引用类型*@  @code{TelerikAutoComplete AutoCompleteRefWithPrimitiveData {get;设置;}字符串的值{获取;设置;} List建议{get;设置;} = new List {"first"， "second"， "third"};｝

@*绑定到模型集合时的引用*@  @code{TelerikAutoComplete< advistionsmodel > AutoCompleteRefWithModel {get;设置;}字符串的值{获取;设置;} List< recommendations model > recommendations {get;设置;} = new List< advistionsmodel > {new advistionsmodel {Suggestion = "first"， SomeOtherField = 1}， new建议书模型{Suggestion = "second"， SomeOtherField = 2}， new建议书模型{Suggestion = "third"， SomeOtherField = 3}};公共类advistionsmodel设置;}//自动补全只需要字符串字段public int SomeOtherField {get; set; } } }

缺失的数据

自动补全功能本质上是一个文本框。这意味着价值始终是字符串，由您绑定和/或使用它。的数据但是，参数是组件功能所必需的，而且绝不能这样零．如果没有建议，你希望提供给用户，考虑使用一个常规的文本框，或创建一个空的集合。

@*如果您无法提供建议列表，则使用空集合，组件将在建议列表中向用户显示“No Data”*@  @code{list 建议{get;设置;} = new List();｝

另请参阅

• 自动完成概述
• 现场演示:自动完成