asp.net + ajax + sqlserver 自动补全功能

代码下载页面:http://download.csdn.net/detail/zhanghui_hn/6994105

说明:数据库连接字符串在web.config文件中,为方便运行使用的是官方的Northwind数据库。

 

参考(向其作者致敬):

²  http://www.loveweb8.com/plus/demo.php?aid=57这个例子是html源码。利用jquery.autocomplete插件利用js实现了自动补全功能。由于我的需要是结合sqlserver数据库表实现自动补全功能。就下来就是将数据库表转为js数组,自然而然就想到了ajax。

²  Asp.NetAjax的两种基本开发模式这篇文章中的第二部分就是说:js调用webservice的示例。

 

代码解析。

1.        添加webservice文件。

添加新项–“启用了AJAX的WCF服务” 将新文件命名为DBService.svc.

 

2.        在DBService.svc中添加函数,函数返回值就是 提示自动补全的数据。

 

[html]
  1. [OperationContract]
  2. public string getSortList()
  3. {
  4.     List<string> sorts = new List<string>();
  5.     using (SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrings[“zhui.pc”].ConnectionString))
  6.     {
  7.         cn.Open();
  8.         SqlCommand cmd = new SqlCommand(“select [LastName] from [dbo].[Employees]”, cn);
  9.         DataTable dt = new DataTable();
  10.         using (SqlDataAdapter da = new SqlDataAdapter(cmd))
  11.         {
  12.             da.Fill(dt);
  13.         }
  14.         foreach (DataRow row in dt.Rows)
  15.         {
  16.             sorts.Add(row[0].ToString());
  17.         }
  18.         cn.Close();
  19.     }
  20.     return string.Join(“,”, sorts.ToArray());
  21. }

 

 

3.        在default.aspx文件添加js、css文件:

 

[html]
  1. <script src=”Scripts/jquery-1.7.1.min.js” type=”text/javascript”></script>
  2. <script src=”Scripts/jquery.autocomplete.min.js” type=”text/javascript”></script>
  3. <link href=”Styles/jquery.autocomplete.css” rel=”stylesheet” type=”text/css” />

 

 

4.        在default.aspx的head部分中$().ready(function ())函数中调用webservice获取自动补全的数据,并将数据关联到输入框中。

 

[html]
  1. <script type=”text/javascript”>
  2.     $().ready(function () {
  3.         NewsSort.getSortList(OnComplete, OnFailed, null);
  4.         function OnComplete(args, context) {
  5.             $(‘#MainContent_searchBox’).AutoComplete({
  6.                 ‘data’: args.split(“,”),
  7.                 ‘itemHeight’: 20,
  8.                 ‘listDirection’: ‘down’,
  9.                 ‘width’: 280
  10.             }).AutoComplete(‘show’);
  11.         }
  12.         function OnFailed(args) {
  13.             alert(“出错了!”);
  14.         }
  15.     });
  16. </script>

 
5.        Finish。项目发布后如果提示webservice找不到对象,请参考了http://www.cnblogs.com/aspnethot/articles/2421678.html

标签