Ajax Toolkit AutoComplete 几种用法
2011-10-06 17:53 时空印记 阅读(1990) 评论(0) 编辑 收藏 举报AutoComplete控件是微软提供的 AJAX Control Toolkit 控件,是用来实现类似google 自动匹配和完成效果。
AutoComplete控件的用法很简单,只需要页面一个TextBox 和 一个 WebService方法就搞定,比写一大堆的JS+.ashx处理省了一堆的时间。
首先WebService,WebService其实就是用来提供AutoComplete可以使用的数据的,它可以有两种格式,一种是两个参数,另一个是三个参数,它们的返回值均为string[]类型。
public string[] ServiceMethod (string prefixText, int count)
public string[] ServiceMethod (string prefixText, int count,string contextKey)
两个参数的比较简单,博客园也写了一堆。
我们说下关于第三个参数的这个方法,contextKey 参数,可以接受我们自定义传值,比如有时候我用到了下拉框类别的时候,这个还是非常有用的 事例如下:
js:
<script language="javascript" type="text/javascript">
function txtKeyDown() {
var ddlGrpId = document.getElementById("<%=ddlGroupName.ClientID %>");
var aceId = "<%=AutoCompleteExtender1.ClientID %>";
var aceName = $find(aceId);
if (aceName != null)
aceName.set_contextKey(ddlGrpId.options[ddlGrpId.selectedIndex].value);
}
</script>
注意:
1.js 函数的最后一句,即在回传之前,设置它的值。
2.注意 $find(aceId) 和aceName.set_contextKey(ddlGrpId.options[ddlGrpId.selectedIndex].value) 中set_contextKey的方法一定不能错,就如同它WebService方法的参
一样名称和方法的名称可以自己随便起,但参数名称是规定的,错了就夭折了哈。
aspx:
<td class="ControlTD" style="width: 200px; height: 19px;">
<asp:ScriptManagerProxy ID="ScriptManager2" runat="server">
<Services>
<asp:ServiceReference Path="~/WebService/AutoComplete.asmx" />
</Services>
</asp:ScriptManagerProxy>
<asp:TextBox ID="txtPatient" runat="server" autoComplete="off" MaxLength="25" onkeydown="return txtKeyDown();" TabIndex="1" Width="194px"></asp:TextBox>
<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServicePath="~/WebService/AutoComplete.asmx" ServiceMethod="GetPatients"
MinimumPrefixLength="1" TargetControlID="txtPatient" CompletionInterval="300" CompletionSetCount="5">
</ajaxToolkit:AutoCompleteExtender>
</td>
你要是看 onkeydown="return txtKeyDown();" 这句不爽,你也可以后台注册txtPatient.Attributes.Add("onkeydown", "return txtKeyDown()");
completionInterval: 是用户录入后多长时间, 程序去调用服务来获取数据 单位是毫秒。
completionSetCount:指定一次应该返回多少项 默认10项
minimumPrefixLength:最少需要录入多少长度才执行匹配下拉。
WebService:
[WebMethod]
public string[] GetPatients(string prefixText,int count, string contextKey)
{
var selectUsers = new StringBuilder("select top 5 userName+'/'+userId as userinfo from ");
selectUsers.Append("userInfo where userType='0' and status='A' and grpId='"+contextKey+"' ");
selectUsers.Append(" and (userId like '" + prefixText + "%' or userName like '" + prefixText + "%')");
DataTable dt = dSqlHepler.ExeDataTable("text", selectUsers.ToString(), null, null, "", true);
dSqlHepler.Close();
if (dt != null && dt.Rows.Count > 0)
{
var items = new string[dt.Rows.Count];
int i = 0;
foreach (DataRow dr in dt.Rows)
{
items.SetValue(dr["userinfo"].ToString(), i);
i++;
}
return items;
}
else
{
var items = new string[1];
items.SetValue("No matching value", 0);
return items;
}
}
以上简单几步全搞定。
没搞定的是 在AutoCompleteExtender 下拉选项的事件控制,选择一项触发一个事件,有时候也很需要的。因为提供的没有这个玩意,所以需要的话,只能费手脚的去下它的源码修改
重新编译了。你有更好的办法?