梓骏

导航

使用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>

第五步:效果演示                        

 

 

 

posted on 2012-08-22 08:18  梓骏  阅读(492)  评论(1编辑  收藏  举报