一、客户端模板
1.我们需要将需要的控件放入页面中
RadScriptManager
RadAutoCompleteBox
其次就是新建一个web服务（前面已经介绍过关于该web服务的创建以及代码在此不讨论）
2.模板的学习
要使用客户端模板必须使用<ClientDropDownItemTemplate>标签，并将模板内容写入其中。
3.如何使用 Value 和 Text 的值
该控件已经提供了类型数据绑定的特殊符号，主要有以下三个
#=...#：可以使用在javascript的表达式中、或作为一个字符串类型的数据项也可以直接在模板中输出该值
#...#：可以在javascript的表达式中使用，但是不能输出该值
#:...#：可以使用在javascript的表达式中、或作为一个字符串类型的数据项也可以作为经过HTML编码后输出到模板中
4.前台代码
学完了前面的如何使用数据，那么我们现在就可以看前台的代码如何编写:
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebTestValidate.WebForm4" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 8 <title>客户端模板</title> 9 </head> 10 <body> 11 <form id="form1" runat="server"> 12 <div> 13 <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> 14 <telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" runat="server" DropDownHeight="150px" DropDownWidth="250px"> 15 <WebServiceSettings Path="WebService2.asmx" Method="GetCompanyNames" /> 16 <ClientDropDownItemTemplate> 17 <table> 18 <tr><td>#= Value#</td><td>#= Text#</td></tr> 19 </table> 20 </ClientDropDownItemTemplate> 21 </telerik:RadAutoCompleteBox> 22 </div> 23 </form> 24 </body> 25 </html>
其中并没有其他新的标签等等，所以在此就省略讲解
二、服务端模板
1.按照正常的规则，我们还是要放相关的控件，但是这次需要多放置一个SqlDataSource控件，因为这里不使用web服务的方式。
2.模板的学习
跟客户端模板一样，服务端模板也需要一个特别的标签，但是服务端的标签跟客户端的标签不是通用的，而是另一个。
为<DropDownItemTemplate>
3.如何使用数据绑定
这里需要特别注意的是跟我们正常的使用 ASP.NET 控件一样 直接使用 Eval 进行数据绑定，那样最后一定会出错。
这里我们必须使用的是 DataBinder.Eval 来进行数据绑定（能够绑定的数据需要根据最终得到的表中有哪些字段）。
4.前端代码
既然我们已经学习完了基础的部分，那么我们就可以开始编写前台的代码：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm5.aspx.cs" Inherits="WebTestValidate.WebForm5" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 8 <title>服务端模板</title> 9 </head> 10 <body> 11 <form id="form1" runat="server"> 12 <div> 13 <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> 14 <telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" runat="server" DataSourceID="SqlDataSource1" DataTextField="realname" DataValueField="uid"> 15 <DropDownItemTemplate> 16 <table> 17 <tr><td><%#DataBinder.Eval(Container.DataItem, "uid") %></td></tr> 18 <tr><td><%#DataBinder.Eval(Container.DataItem,"realname") %></td></tr> 19 <tr><td><%#DataBinder.Eval(Container.DataItem,"username") %></td></tr> 20 <tr><td><%#DataBinder.Eval(Container.DataItem,"usergroup") %></td></tr> 21 </table> 22 </DropDownItemTemplate> 23 </telerik:RadAutoCompleteBox> 24 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TESTConnectionString %>" SelectCommand="SELECT * FROM [pre_add_user]"></asp:SqlDataSource> 25 </div> 26 </form> 27 </body> 28 </html>
三、如何在客户端进行控制
学习到这里，我们可以发现几乎我们所做的都是如何将数据更好的呈现，但是却没有实质性的去控制它，所以现在开始我们将学习如何在客户端使用javascript控制该控件。
前段的代码如下（如果有看不懂的可以跳过，先学习后面的javascript方法）:
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="WebTestValidate.WebForm6" %> 2 <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 8 <title>在客户端操作RadAutoCompleteBox</title> 9 </head> 10 <body> 11 <form id="form1" runat="server"> 12 <div> 13 <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> 14 <telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" runat="server" AutoPostBack="True" DataSourceID="SqlDataSource1" OnDropDownTemplateNeeded="RadAutoCompleteBox1_DropDownTemplateNeeded" OnEntryAdded="RadAutoCompleteBox1_EntryAdded" OnEntryRemoved="RadAutoCompleteBox1_EntryRemoved" OnTextChanged="RadAutoCompleteBox1_TextChanged"></telerik:RadAutoCompleteBox> 15 </div> 16 <div> 17 <table> 18 <tr><td> 19 <telerik:RadButton ID="RadButton1" runat="server" Text="Add New Entry" OnClientClicked="addEntry" ></telerik:RadButton> 20 </td></tr> 21 <tr> 22 <td> 23 <telerik:RadTextBox ID="RadTextBox1" runat="server" EmptyMessage="entry a message"></telerik:RadTextBox></td> 24 </tr> 25 <tr><td> 26 <telerik:RadButton ID="RadButton2" runat="server" Text="Remove Entry" OnClientClicked="removeEntry"></telerik:RadButton> 27 </td></tr> 28 <tr><td> 29 <telerik:RadButton ID="RadButton3" runat="server" Text="Clear All" OnClientClicked="claerEntry"></telerik:RadButton> 30 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TESTConnectionString %>" SelectCommand="SELECT * FROM [pre_add_user]"></asp:SqlDataSource> 31 </td></tr> 32 <tr><td> 33 <telerik:RadButton ID="RadButton4" runat="server" Text="Print Entry" OnClientClicked="printEntry"></telerik:RadButton> 34 </td></tr> 35 <tr><td> 36 <telerik:RadTextBox ID="RadTextBox2" runat="server"></telerik:RadTextBox> 37 </td></tr> 38 </table> 39 </div> 40 </form> 41 <script type="text/javascript"> 42 function addEntry(sender, args) { 43 var autocompleteBox = $find("<%= RadAutoCompleteBox1.ClientID %>"); 44 var radTextBox = $find("<%= RadTextBox1.ClientID %>"); 45 //判断文本框是否存在数据，不存在则退出 46 if (radTextBox.get_value() == "") return; 47 //创建新的entry 48 var entry = new Telerik.Web.UI.AutoCompleteBoxEntry(); 49 //将新的entry的文本设置为文本框内的内容 50 entry.set_text(radTextBox.get_value()); 51 //将新的entry加入到控件中 52 autocompleteBox.get_entries().add(entry); 53 } 54 function removeEntry(sender, args) { 55 var autocompleteBox = $find("<%= RadAutoCompleteBox1.ClientID %>"); 56 //获得索引在第一个的entry 57 var firstentry = autocompleteBox.get_entries().getEntry(0); 58 //将索引在第一个的entry删除 59 autocompleteBox.get_entries().remove(firstentry); 60 } 61 function claerEntry(sender, args) { 62 //清空entry 63 $find("<%= RadAutoCompleteBox1.ClientID %>").get_entries().clear(); 64 } 65 function printEntry(sender, args) { 66 var autocompleteBox = $find("<%= RadAutoCompleteBox1.ClientID%>"); 67 var labe = $find("<%= RadTextBox2.ClientID %>"); 68 //将所有entry内容输出至输入框中 69 labe.set_value(autocompleteBox.get_text()); 70 } 71 </script> 72 </body> 73 </html>
四、如何在服务端进行控制
有关的属性:
| 名称 | 类型 | 返回值类型 | 说明 |
| Text | Get |
String |
获得输入区域中的内容 |
| InputType | Get/Set |
Telerik.Web.UI. RadAutoCompleteFilter |
获得/设置输入的类型: RadAutoCompleteInputType: { Token, Text, } |
| Filter | Get/Set |
Telerik.Web.UI. RadAutoCompleteFilter |
获得/设置过滤类型: RadAutoCompleteFilter: { StartsWith, Contains, } |
| AllowCustomEntry | Get/Set |
Bool |
是否允许用户自定义输入 |
| Attributes | Get |
System.Web.UI.AttrbuteCollection |
Gets the collection of arbitrary attributes that do not correspond to the properties of the control. |
| Delimiter | GET/Set |
String |
获得/设置分隔符（只有当InputType为Text时使用该分隔符） |
| DropDownItemTemplate | Get/Set |
System.Web.UI.ITemplate |
获得/设置显示在下拉框中的数据项模板 |
| Entries | Get |
Telerik.Web.UI. AutoCompleteBoxEntryCollection |
获得一组输入区域中的内容 |
| ID | Get/Set |
String |
获得/设置ID |
| DataTextField | Get/Set |
String |
获得/设置绑定到Text的字段名称 |
| DataValueField | Get/Set |
String |
获得/设置绑定到Value的字段名称 |
有关服务端事件:
| 名称 | 参数 | 说明 |
| EntryAdded |
RadAutoCompleteBox object, AutoCompleteEntryEventArgs |
当输入区域中增加一条token则响应（InputType必须为Token） |
| EntryRemoved |
RadAutoCompleteBox object, AutoCompleteEntryEventArgs |
当输入区域中删除一条token则响应（InputType必须为Token） |
| TextChanged |
RadAutoCompleteBox object, AutoCompleteTextEventArgs |
当输入区域中的文本被修改后响应（InputType必须为Text） |
| DropDownTemplateNeeded |
RadAutoCompleteBox object, AutoCompleteDropDownItemEventArgs |
在模板被显示到下拉框前响应 |
以下为服务端事件的举例:
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 using Telerik.Web.UI.AutoCompleteBox; 8 9 namespace WebTestValidate 10 { 11 public partial class WebForm6 : System.Web.UI.Page 12 { 13 protected void Page_Load(object sender, EventArgs e) 14 { 15 16 } 17 18 protected void RadAutoCompleteBox1_EntryAdded(object sender, Telerik.Web.UI.AutoCompleteEntryEventArgs e) 19 { 20 string value = e.Entry.Value; 21 string text = e.Entry.Text; 22 } 23 24 protected void RadAutoCompleteBox1_EntryRemoved(object sender, Telerik.Web.UI.AutoCompleteEntryEventArgs e) 25 { 26 string value = e.Entry.Value; 27 string text = e.Entry.Text; 28 } 29 30 protected void RadAutoCompleteBox1_TextChanged(object sender, Telerik.Web.UI.AutoCompleteTextEventArgs e) 31 { 32 string text = e.Text; 33 } 34 35 protected void RadAutoCompleteBox1_DropDownTemplateNeeded(object sender, Telerik.Web.UI.AutoCompleteDropDownItemEventArgs e) 36 { 37 38 } 39 } 40 }
其中描述了如何获得用户所选的Text以及Value
五、客户端函数
RadAutoCompleteBox 拥有的方法
| 名称 | 参数 | 返回值类型 | 说明 |
| get_text() | 无 |
string |
返回输入区域中的内容，并且是以delimeter参数分割 |
| get_entries() | 无 |
Telerik.Web.UI. AutoCompleteBoxEntryCollection |
返回一组entry |
| get_inputElement | 无 |
DOM Object |
返回输入区域的DOM对象 |
| get_bindingMode() | 无 |
Telerik.Web.UI. RadAutoCompleteBoxBinding Enum RadAutoCompleteBoxBinding: { Callback: 0, WebService: 1, OData: 2 } |
返回RadAutoCompleteBoxBinding枚举中的一个值 |
| get_isUsingODataSource() | 无 | boolean | 是否使用OData |
操作
| 名称 | 参数 | 返回值类型 | 说明 |
| clear() | 无 | 无 | 关闭下拉框并清空输入区域 |
| createEntry() |
string, string |
Telerik.Web.UI. AutoCompleteBoxEntry |
返回创建的entry |
| query() | string | 无 | 发送一个请求至服务器并且带有一个value的参数 |
AutoCompleteBoxEntry 拥有的方法
| 名称 | 参数 | 返回值类型 | 说明 |
| get_index() | 无 |
number |
返回指定entry的索引 |
| get_text() | 无 |
string |
返回指定entry的text |
| get_value() | 无 |
string |
返回指定entry的value |
| get_token() | 无 |
DOM object |
返回指定entry的DOM 对象 |
| get_parent | 无 |
Telerik.Web.UI. RadAutoCompleteBox |
返回指定entry的父对象 |
AutoCompleteBoxEntryCollection 拥有的方法
| 名称 | 参数 | 返回值类型 | 说明 |
| add() |
Telerik.Web.UI. AutoCompleteBoxEntry |
无 | 增加指定的entry到entry组中 |
| insert() |
number, Telerik.Web.UI. AutoCompleteBoxEntry |
无 | 增加指定的entry到entry组中的指定位置 |
| remove() |
Telerik.Web.UI. AutoCompleteBoxEntry |
无 | 从entry组中删除指定的entry |
| clear() | 无 | 无 | 清空entry组 |
| getEntry() |
number |
Telerik.Web.UI. AutoCompleteBoxEntry |
返回直嘀咕索引的entry |
| indexOf() |
Telerik.Web.UI. AutoCompleteBoxEntry |
number |
返回指定entry的索引 |
| get_count() | 无 |
number |
返回entry组中拥有的entry的数量 |