zoukankan      html  css  js  c++  java
  • 使用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>

    第五步:效果演示                        

     

  • 相关阅读:
    Python-asyncio
    Python-异步编程
    软件工程个人作业01
    《构建之法》阅读笔记6
    《构建之法》阅读笔记5
    《构建之法》阅读笔记4
    《构建之法》阅读笔记3
    《构建之法》第二章阅读笔记
    《构建之法》第一章阅读笔记
    开发web信息管理系统用到的相关技术
  • 原文地址:https://www.cnblogs.com/huangxuening/p/2650152.html
Copyright © 2011-2022 走看看