AjaxCo ntrolToolkit是一组控件的集合,可以实现自动补充文本框,点击文本框弹出日历,加水印等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,第二行代码)


三:添加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 
{ 
///  
/// WebService 的摘要说明 
///  
[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 suggestions = new List();//声明一泛型集合 
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 list = new List(count); 
// Random rnd = new Random(); 
// for (int i = 1; i 

四:完成,运行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:
 
 
 
 
 


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
 
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 suggestions = new List();//声明一泛型集合
suggestions.Clear(); 
if (dt.Rows.Count > 0) 
{ 
for (int i = 0; i 

利用AjaxControlToolkit实现百度搜索时的下拉列表提示详细步骤的更多相关文章

  1. 利用vue3仿苹果系统侧边消息提示效果实例

    这篇文章主要给大家介绍了关于如何利用vue3仿苹果系统侧边消息提示效果的相关资料,文中通过实例代码以及图文介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下

  2. jQuery实现可移动选项的左右下拉列表示例

    这篇文章主要介绍了jQuery实现可移动选项的左右下拉列表,涉及jQuery针对表格table及页面元素动态操作的相关技巧,需要的朋友可以参考下

  3. jQuery实现邮箱下拉列表自动补全功能

    在一些网站我们经常看到当我们要输入邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助我们自动补全邮箱,怎么实现的呢?今天下面给大家分享基于jquery实现邮箱下拉列表自动补全功能,一起看看吧

  4. jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例

    这篇文章主要介绍了jQuery实现可兼容IE6的淡入淡出效果告警提示功能,结合具体实例形式分析了jQuery弹出警告提示功能的具体实现步骤与相关操作技巧,需要的朋友可以参考下

  5. jQuery实现联动下拉列表查询框

    这篇文章主要为大家详细介绍了jQuery实现联动下拉列表查询框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  6. Ajax实现搜索框提示功能

    这篇文章介绍了Ajax实现搜索框提示功能的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  7. ajax实现输入框文字改变展示下拉列表的效果示例

    这篇文章主要介绍了通过ajax实现输入框文字改变展示下拉列表的效果,需要的朋友可以参考下

  8. Android Studio实现下拉列表效果

    这篇文章主要为大家详细介绍了Android Studio实现下拉列表效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. nodejs利用readline提示输入内容实例代码

    这篇文章主要给大家介绍了关于nodejs利用readline提示输入内容的相关资料,Readline是Node.js里实现标准输入输出的封装好的模块,通过这个模块我们可以以逐行的方式读取数据流,需要的朋友可以参考下

  10. jquery自定义下拉列表示例

    这篇文章主要介绍了jquery自定义下拉列表示例,需要的朋友可以参考下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部