您的位置:首页 > 数据库 > SQL

Ajax扩展控件AutoCompleteExtender 连接sql数据库 实现仿Google自动生成功能

2010-08-17 16:50 603 查看
最近做了一个项目,其中有个界面需要实现仿google自动生成功能.就上网查了一下,终于被我做出来了.所以拿来和大家分享一下.

首先大家看一下效果.


1.打开vs建一个网站我用的是vs2008(安装有AJAX扩展控件) sql server 2005



2.向界面拖进一个ToolkitScriptManager(在扩展控件倒数几行) 在添加一个TextBox 再添加一个AutoCompleteExtender控件.我拖这个控件的时候 在界面上不能拖入 我是从直接拖到前台代码处

前台代码如下autocomplete.aspx:

<%@ Page Language="C#" AutoEventWireup="false" CodeFile="autocomplete.aspx.cs" Inherits="autocomplete" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<mce:script type="text/javascript"><!--

function pageLoad() {
}

// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
ServiceMethod="GetSuperviserList" ServicePath="~/ProjectManage.asmx"
MinimumPrefixLength="1" CompletionSetCount="3" CompletionInterval="100"
DelimiterCharacters="" Enabled="True" UseContextKey="True"
TargetControlID="TextBox1" EnableCaching="true">
</asp:AutoCompleteExtender>
</div>
</form>
</body>
</html>


解释一下autocomplete的属性:

1.TargetControlID:指定将被辅助完成自动输入的控件ID,这里的控件只能是TextBox;
2.ServicePath:指出提供服务的WEB服务路径,若不指出则ServiceMethod表示本页面对应的方法名;
3.ServiceMethod:指出提供服务的方法名;
4.MinimumPrefixLength:指出开始提供提示服务时,TextBox控件应有的最小字符数,默认为3;
5.CompletionSetCount:显示的条数,默认为10;
6.EnableCaching:是否在客户端缓存数据,默认为true;
7.CompletionInterval:从服务器读取数据的时间间隔,默认为1000,单位:毫秒.

然后建一个 web 服务(.asmx)具体代码如下:

using System;
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Data.SqlClient;

/// <summary>
///ProjectManage 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class ProjectManage : System.Web.Services.WebService {

public ProjectManage () {

//如果使用设计的组件,请取消注释以下行
//InitializeComponent();
}
[WebMethod]
public string[] GetSuperviserList(string prefixText, int count)
{
List<string> items = new List<string>(count);//泛型
string sql = "select top " + count + " Name from Superviser where Name like '" + prefixText + "%'";
SqlConnection conn = new SqlConnection("Data Source=AP-HZ-00052//SQLEXPRESS;Initial Catalog=Test;Integrated Security=True");
conn.Open();
SqlCommand cmd = new SqlCommand(sql, conn);
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
items.Add(sdr["Name"].ToString());
}
conn.Close();
return items.ToArray();
}

}


这样上面的功能就能实现啦. 注意在做的时候string prefixText不要变, 尽量用ToolkitScriptManage .
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: