利用AjaxControlToolkit实现百度搜索时的下拉列表提示详细步骤
程序员文章站
2022-08-09 20:35:46
ajaxcontroltoolkit是一组控件的集合，可以实现自动补充文本框，点击文本框弹出日历，加水印等ajax效果,包含40多个控件,具体实现效果如：http://ww...
ajaxcontroltoolkit是一组控件的集合，可以实现自动补充文本框，点击文本框弹出日历，加水印等ajax效果,包含40多个控件,具体实现效果如：http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/default.aspx
像百度搜索一样，根据用户输入自动联想相关词汇，借助ajaxcontroltoolkit中的autocompleteextender控件很简单的实现，实现效果如下：
详细步骤：
一：vs中安装ajaxcontroltoolkit
ajaxcontroltoolkit安装到vs中(需要注意版本问题)：
安装方法：http://www.asp.net/ajaxlibrary/act.ashx
相应版本提示：http://ajaxcontroltoolkit.codeplex.com/
二：web页面中调用autocompleteextender(页面中要提前register,第二行代码)
<%@ page language="c#" autoeventwireup="true" codebehind="webform1.aspx.cs" inherits="html_editor.webform1" %>
<%@ register tagprefix="asp" namespace="ajaxcontroltoolkit" assembly="ajaxcontroltoolkit" %>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:toolkitscriptmanager id="toolkitscriptmanager1" runat="server" />
<asp:textbox id="textbox1" runat="server"></asp:textbox>
<asp:autocompleteextender id="autocompleteextender1" runat="server"
targetcontrolid="textbox1"
completionsetcount="10"
enablecaching="true"
minimumprefixlength="1"
completioninterval="100"
servicepath="webservice.asmx"
servicemethod="getenglishname">
</asp:autocompleteextender>
</div>
</form>
</body>
</html>
三：添加web服务 webservice.asmx
using system;
using system.collections.generic;
using system.data.sqlclient;
using system.linq;
using system.web;
using system.web.script.services;
using system.web.services;
namespace html_editor
{
/// <summary>
/// webservice 的摘要说明
/// </summary>
[webservice(namespace = "http://tempuri.org/")]
[webservicebinding(conformsto = wsiprofiles.basicprofile1_1)]
[system.componentmodel.toolboxitem(false)]
// 若要允许使用 asp.net ajax 从脚本中调用此 web 服务，请取消注释以下行。
[system.web.script.services.scriptservice]
public class webservice : system.web.services.webservice
{
//从数据库中读取匹配信息
[webmethod]
[scriptmethod]
public string[] getenglishname(string prefixtext, int count)
{
list<string> suggestions = new list<string>();//声明一泛型集合
sqlconnection con = new sqlconnection("server=.;database=attendance;uid=sa;pwd=;");
con.open();
sqlcommand com = new sqlcommand(" select [englishname] from [employee] where [englishname] like '%t%' order by [englishname]", con);
sqldatareader sdr = com.executereader();
while (sdr.read())
{
suggestions.add(sdr.getstring(0));
}
sdr.close();
con.close();
return suggestions.toarray();
}
//直接用方法产生匹配信息
//[webmethod]
//public string[] getcompletelist(string prefixtext, int count)
//{
// char c1, c2, c3;
// if (count == 0)
// count = 10;
// list<string> list = new list<string>(count);
// random rnd = new random();
// for (int i = 1; i <= count; i++)
// {
// c1 = (char)rnd.next(65, 90);
// c2 = (char)rnd.next(97, 122);
// c3 = (char)rnd.next(97, 122);
// list.add(prefixtext + c1 + c2 + c3);
// }
// return list.toarray();
//}
}
}
四：完成，运行web页面即可看到文本框的自动补充效果，需要注意的地方如下：
autocompleteextender控件参数说明：
1.targetcontrolid:指定要实现提示功能的控件；
2.servicepath:webservice的路径，提取数据的方法是写在一个webservice中的；
3.serveicemethod:写在webservice中的用于提取数据的方法的名字；
4.minimumprefixlength:用来设置用户输入多少字母才出现提示效果；
5.completionsetcount:设置提示数据的行数；
6.completioninterval:从服务器获取书的时间间隔，单位是毫秒。
webservice.asmx 需要注意的地方：
1.由于该web服务是为ajax框架提供服务的，因此在类声明之前得加上属性声明：
[system.web.script.services.scriptservice]
2.特别需要注意的是gettextstring这个方法。凡是为autocompleteextender控件提供服务的方法都必需完全满足以下三个条件：
a.方法的返回类型必需为：string []；
b.方法的传入参数类型必需为：string , int；
c.两个传入参数名必需为：prefixtext , count。
文本框输入的值传递到webservice中：
aspx:
<%@ page language="c#" autoeventwireup="true" codefile="testsearch.aspx.cs" inherits="testsearch" %>
<%@ register tagprefix="asp" namespace="ajaxcontroltoolkit" assembly="ajaxcontroltoolkit" %>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function ontxtpersoninfokeydown() {
var val = document.getelementbyid("<%=textbox1.clientid %>").value;
var nameclientid = "<%=autocompleteextender1.clientid %>";
var acname = $find(nameclientid);
if (acname != null) {
acname.set_contextkey(val);
}
}
function ontxtpersoninfokeydown2() {
var val = document.getelementbyid("<%=textbox2.clientid %>").value;
var nameclientid = "<%=autocompleteextender2.clientid %>";
var acname = $find(nameclientid);
if (acname != null) {
acname.set_contextkey(val);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:toolkitscriptmanager id="toolkitscriptmanager1" runat="server" />
<asp:textbox id="textbox1" runat="server"></asp:textbox>
<asp:autocompleteextender id="autocompleteextender1" runat="server"
targetcontrolid="textbox1"
completionsetcount="10"
enablecaching="false"
firstrowselected="true"
usecontextkey="true"
minimumprefixlength="0"
completioninterval="100"
servicepath="webservice.asmx"
servicemethod="getenglishname">
</asp:autocompleteextender>
<br />
<asp:textbox id="textbox2" runat="server"></asp:textbox>
<asp:autocompleteextender id="autocompleteextender2" runat="server"
targetcontrolid="textbox2"
completionsetcount="10"
enablecaching="false"
firstrowselected="true"
usecontextkey="true"
minimumprefixlength="0"
completioninterval="100"
servicepath="webservice.asmx"
servicemethod="getenglishname">
</asp:autocompleteextender>
</div>
</form>
</body>
</html>
aspx.cs
using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.ui;
using system.web.ui.webcontrols;
public partial class testsearch : system.web.ui.page
{
protected void page_load(object sender, eventargs e)
{
textbox1.attributes.add("onkeydown", "return ontxtpersoninfokeydown();");
textbox2.attributes.add("onkeydown", "return ontxtpersoninfokeydown2();");
}
}
webservice.asmx.cs
<%@ webservice language="c#" class="webservice" %>
using system;
using system.web;
using system.web.services;
using system.web.services.protocols;
using system.web.script.services;
using system.data;
using system.data.sqlclient;
using system.collections.generic;
[webservice(namespace = "http://tempuri.org/")]
[webservicebinding(conformsto = wsiprofiles.basicprofile1_1)]
// 若要允许使用 asp.net ajax 从脚本中调用此 web 服务，请取消注释以下行。
[system.web.script.services.scriptservice]
public class webservice : system.web.services.webservice
{
//从数据库中读取匹配信息
[webmethod]
[scriptmethod]
public string[] getenglishname(string prefixtext, int count, string contextkey)
{
sqlhelper sqlh = new sqlhelper();
//contextkey = "t";
string strsql = " select [englishname] from [employee] where [leftdate] is null and [englishname] like '" + contextkey + "%' order by [englishname] ";
datatable dt = sqlh.executequery(strsql, commandtype.text);
list<string> suggestions = new list<string>();//声明一泛型集合
suggestions.clear();
if (dt.rows.count > 0)
{
for (int i = 0; i < dt.rows.count; i++)
{
suggestions.add(dt.rows[i][0].tostring());
}
}
return suggestions.toarray();
}
}
像百度搜索一样，根据用户输入自动联想相关词汇，借助ajaxcontroltoolkit中的autocompleteextender控件很简单的实现，实现效果如下：
详细步骤：
一：vs中安装ajaxcontroltoolkit
ajaxcontroltoolkit安装到vs中(需要注意版本问题)：
安装方法：http://www.asp.net/ajaxlibrary/act.ashx
相应版本提示：http://ajaxcontroltoolkit.codeplex.com/
二：web页面中调用autocompleteextender(页面中要提前register,第二行代码)
复制代码 代码如下:
<%@ page language="c#" autoeventwireup="true" codebehind="webform1.aspx.cs" inherits="html_editor.webform1" %>
<%@ register tagprefix="asp" namespace="ajaxcontroltoolkit" assembly="ajaxcontroltoolkit" %>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:toolkitscriptmanager id="toolkitscriptmanager1" runat="server" />
<asp:textbox id="textbox1" runat="server"></asp:textbox>
<asp:autocompleteextender id="autocompleteextender1" runat="server"
targetcontrolid="textbox1"
completionsetcount="10"
enablecaching="true"
minimumprefixlength="1"
completioninterval="100"
servicepath="webservice.asmx"
servicemethod="getenglishname">
</asp:autocompleteextender>
</div>
</form>
</body>
</html>
三：添加web服务 webservice.asmx
复制代码 代码如下:
using system;
using system.collections.generic;
using system.data.sqlclient;
using system.linq;
using system.web;
using system.web.script.services;
using system.web.services;
namespace html_editor
{
/// <summary>
/// webservice 的摘要说明
/// </summary>
[webservice(namespace = "http://tempuri.org/")]
[webservicebinding(conformsto = wsiprofiles.basicprofile1_1)]
[system.componentmodel.toolboxitem(false)]
// 若要允许使用 asp.net ajax 从脚本中调用此 web 服务，请取消注释以下行。
[system.web.script.services.scriptservice]
public class webservice : system.web.services.webservice
{
//从数据库中读取匹配信息
[webmethod]
[scriptmethod]
public string[] getenglishname(string prefixtext, int count)
{
list<string> suggestions = new list<string>();//声明一泛型集合
sqlconnection con = new sqlconnection("server=.;database=attendance;uid=sa;pwd=;");
con.open();
sqlcommand com = new sqlcommand(" select [englishname] from [employee] where [englishname] like '%t%' order by [englishname]", con);
sqldatareader sdr = com.executereader();
while (sdr.read())
{
suggestions.add(sdr.getstring(0));
}
sdr.close();
con.close();
return suggestions.toarray();
}
//直接用方法产生匹配信息
//[webmethod]
//public string[] getcompletelist(string prefixtext, int count)
//{
// char c1, c2, c3;
// if (count == 0)
// count = 10;
// list<string> list = new list<string>(count);
// random rnd = new random();
// for (int i = 1; i <= count; i++)
// {
// c1 = (char)rnd.next(65, 90);
// c2 = (char)rnd.next(97, 122);
// c3 = (char)rnd.next(97, 122);
// list.add(prefixtext + c1 + c2 + c3);
// }
// return list.toarray();
//}
}
}
四：完成，运行web页面即可看到文本框的自动补充效果，需要注意的地方如下：
autocompleteextender控件参数说明：
1.targetcontrolid:指定要实现提示功能的控件；
2.servicepath:webservice的路径，提取数据的方法是写在一个webservice中的；
3.serveicemethod:写在webservice中的用于提取数据的方法的名字；
4.minimumprefixlength:用来设置用户输入多少字母才出现提示效果；
5.completionsetcount:设置提示数据的行数；
6.completioninterval:从服务器获取书的时间间隔，单位是毫秒。
webservice.asmx 需要注意的地方：
1.由于该web服务是为ajax框架提供服务的，因此在类声明之前得加上属性声明：
[system.web.script.services.scriptservice]
2.特别需要注意的是gettextstring这个方法。凡是为autocompleteextender控件提供服务的方法都必需完全满足以下三个条件：
a.方法的返回类型必需为：string []；
b.方法的传入参数类型必需为：string , int；
c.两个传入参数名必需为：prefixtext , count。
文本框输入的值传递到webservice中：
aspx:
复制代码 代码如下:
<%@ page language="c#" autoeventwireup="true" codefile="testsearch.aspx.cs" inherits="testsearch" %>
<%@ register tagprefix="asp" namespace="ajaxcontroltoolkit" assembly="ajaxcontroltoolkit" %>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function ontxtpersoninfokeydown() {
var val = document.getelementbyid("<%=textbox1.clientid %>").value;
var nameclientid = "<%=autocompleteextender1.clientid %>";
var acname = $find(nameclientid);
if (acname != null) {
acname.set_contextkey(val);
}
}
function ontxtpersoninfokeydown2() {
var val = document.getelementbyid("<%=textbox2.clientid %>").value;
var nameclientid = "<%=autocompleteextender2.clientid %>";
var acname = $find(nameclientid);
if (acname != null) {
acname.set_contextkey(val);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:toolkitscriptmanager id="toolkitscriptmanager1" runat="server" />
<asp:textbox id="textbox1" runat="server"></asp:textbox>
<asp:autocompleteextender id="autocompleteextender1" runat="server"
targetcontrolid="textbox1"
completionsetcount="10"
enablecaching="false"
firstrowselected="true"
usecontextkey="true"
minimumprefixlength="0"
completioninterval="100"
servicepath="webservice.asmx"
servicemethod="getenglishname">
</asp:autocompleteextender>
<br />
<asp:textbox id="textbox2" runat="server"></asp:textbox>
<asp:autocompleteextender id="autocompleteextender2" runat="server"
targetcontrolid="textbox2"
completionsetcount="10"
enablecaching="false"
firstrowselected="true"
usecontextkey="true"
minimumprefixlength="0"
completioninterval="100"
servicepath="webservice.asmx"
servicemethod="getenglishname">
</asp:autocompleteextender>
</div>
</form>
</body>
</html>
aspx.cs
复制代码 代码如下:
using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.ui;
using system.web.ui.webcontrols;
public partial class testsearch : system.web.ui.page
{
protected void page_load(object sender, eventargs e)
{
textbox1.attributes.add("onkeydown", "return ontxtpersoninfokeydown();");
textbox2.attributes.add("onkeydown", "return ontxtpersoninfokeydown2();");
}
}
webservice.asmx.cs
复制代码 代码如下:
<%@ webservice language="c#" class="webservice" %>
using system;
using system.web;
using system.web.services;
using system.web.services.protocols;
using system.web.script.services;
using system.data;
using system.data.sqlclient;
using system.collections.generic;
[webservice(namespace = "http://tempuri.org/")]
[webservicebinding(conformsto = wsiprofiles.basicprofile1_1)]
// 若要允许使用 asp.net ajax 从脚本中调用此 web 服务，请取消注释以下行。
[system.web.script.services.scriptservice]
public class webservice : system.web.services.webservice
{
//从数据库中读取匹配信息
[webmethod]
[scriptmethod]
public string[] getenglishname(string prefixtext, int count, string contextkey)
{
sqlhelper sqlh = new sqlhelper();
//contextkey = "t";
string strsql = " select [englishname] from [employee] where [leftdate] is null and [englishname] like '" + contextkey + "%' order by [englishname] ";
datatable dt = sqlh.executequery(strsql, commandtype.text);
list<string> suggestions = new list<string>();//声明一泛型集合
suggestions.clear();
if (dt.rows.count > 0)
{
for (int i = 0; i < dt.rows.count; i++)
{
suggestions.add(dt.rows[i][0].tostring());
}
}
return suggestions.toarray();
}
}