使用AutoCompleteExtender实现搜索下拉提示框,读取数据库内容
使用AutoCompleteExtender实现搜索下拉提示框,读取数据库内容
第一步:建立一个web服务:在所在项目上右键--添加--新建项--添加一个Web 服务 :AutoCompleteService.asmx,该文件位于App_Code下,代码如下
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using CwayPlatform;
using System.Collections.Generic;
using System.Data.SqlClient;
/// <summary>
/// AutoCompleteService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class AutoCompleteService : System.Web.Services.WebService {
public AutoCompleteService () {
//如果使用设计的组件,请取消注释以下行
//InitializeComponent();
}
[WebMethod]
public string[] GetSearchTerms(string prefixText, int count)
{ // 定义字符串数组
List<string> suggestions = new List<string>();
count = 5; //设置提示信息的个数
string sql = "SELECT TOP " + count + " Cname FROM p_class WHERE Cname like '" + prefixText + "%'";
SqlDataReader dr = CwayDAL.GetReader(sql);
while (dr.Read())
{
suggestions.Add(dr[0].ToString());
}
dr.Close();
return suggestions.ToArray();
}
}
GetSearchTerms方法有两个参数,第一个参数string prefixText, 就是用户录入的内容, 第二个参数, int count, 是定义中指定的下拉列表长度, 也就是要返回的项的个数, 我们在定义中没有指定长度, 它会使用一个默认长度10 .该方法返回一个字符串数组
以上是后台代码内容。
第二步:拖控件ToolkitScriptManager :在前台拖入一个ToolkitScriptManager,
设置ScriptMode="Release",并且把web.config的debug设置为false
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" ScriptMode="Release">
</ajaxToolkit:ToolkitScriptManager>
第三步:拖入一个UpdatePanel控件;
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
</asp:UpdatePanel>
第四步:然后在UpdatePanel内再拖入一个AutoCompleteExtender控件,设置如下:ServicePath="~/AutoCompleteService.asmx" 这个就是设置ServicePath为刚才你建立的那个AutoCompleteService.asmx的路径;TargetControlID="txtKeyWord" 关联的文本框的id,CompletionInterval="300",CompletionInterval:从服务器读取数据的时间间隔,默认为1000毫秒。
则前台aspx页面中的代码为
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="lx_Default" %>
--%>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" ScriptMode="Release">
</ajaxToolkit:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtkeyword" runat="server"></asp:TextBox>
<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="txtkeyword" ServicePath="AutoCompleteService.asmx" ServiceMethod="GetSearchTerms" MinimumPrefixLength="1" ></ajaxToolkit:AutoCompleteExtender>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
/html>
第五步:效果演示