代码改变世界

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 下拉选项的事件控制,选择一项触发一个事件,有时候也很需要的。因为提供的没有这个玩意,所以需要的话,只能费手脚的去下它的源码修改

重新编译了。你有更好的办法?