zoukankan      html  css  js  c++  java
  • Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中

     

    功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择

    1.建立一aspx页面,html代码

    <HTML>
        <HEAD>
            <title>WebForm1</title>
            <SCRIPT language="javascript">           
                //城市------------------------------
                function cityResult()
                {
                    var city=document.getElementById("TextBox1");
                    WebForm1.GetCityList(city.value,get_city_Result_CallBack);
                }
               
                function get_city_Result_CallBack(response)
                {
                    if (response.value != null)
                    {                   
                        //debugger;
                        document.getElementById("DropDownList1").style.display="block";
                        document.getElementById("DropDownList1").length=0;               
                    var ds = response.value;
                        if(ds != null && typeof(ds) == "object" && ds.Tables != null)
                        {                   
                            for(var i=0; i<ds.Tables[0].Rows.length; i++)
                        {
                            var name=ds.Tables[0].Rows[i].city;
                          var id=ds.Tables[0].Rows[i].cityID;
                          document.getElementById("DropDownList1").options.add(new Option(name,id));
                        }
                        }
                    }
                    else
                    {
                        document.getElementById("DropDownList1").style.display="none";
                    }            
                    return
                }
              
                function getData()
                {
                    var province=document.getElementById("DropDownList1");
                    var pindex = province.selectedIndex;
                    var pValue = province.options[pindex].value;
                    var pText  = province.options[pindex].text;                                               

                    document.getElementById("<%=TextBox1.ClientID%>").innerText=pText;
                }
            </SCRIPT>
        </HEAD>
        <body>
            <form id="Form1" method="post" runat="server">
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <br>
                <asp:DropDownList ID="DropDownList1" runat="server" Width="192px" style="display:none"></asp:DropDownList>
            </form>
        </body>
    </HTML>2.cs代码

    using System;
    using System.Collections;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Web;
    using System.Web.SessionState;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.HtmlControls;
    using System.Data.SqlClient;
    namespace ajaxselect
    {
        /**//// <summary>
        /// Summary description for WebForm1.
        /// </summary>
        public class WebForm1 : System.Web.UI.Page
        {
            protected System.Web.UI.WebControls.TextBox TextBox1;
            protected System.Web.UI.WebControls.DropDownList DropDownList1;
       
            private void Page_Load(object sender, System.EventArgs e)
            {
                Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));
                if (!Page.IsPostBack)
                {
                    this.TextBox1.Attributes.Add("onchange", "cityResult();");
                    this.DropDownList1.Attributes.Add("onclick", "getData();");
                }
            }

            Web Form Designer generated code#region Web Form Designer generated code
            override protected void OnInit(EventArgs e)
            {
                //
                // CODEGEN: This call is required by the ASP.NET Web Form Designer.
                //
                InitializeComponent();
                base.OnInit(e);
            }
           
            /**//// <summary>
            /// Required method for Designer support - do not modify
            /// the contents of this method with the code editor.
            /// </summary>
            private void InitializeComponent()
            {   
                this.Load += new System.EventHandler(this.Page_Load);

            }
            #endregion

            GetCityList#region GetCityList
            [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
            public DataSet GetCityList(int provinceid)
            {
                string sql = "select * from city where father like '%" + provinceid + "%'";
                return GetDataSet(sql);
            }
            #endregion
            GetDataSet#region GetDataSet
            public static DataSet GetDataSet(string sql)
            {
                string ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
                SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);
                DataSet ds = new DataSet();
                sda.Fill(ds);
                return ds;
            }
            #endregion

        }
    }3.源代码下载  
    4.数据库脚本

    CREATE TABLE [dbo].[city](
        [id] [int] NOT NULL,
        [cityID] [nvarchar](6) COLLATE Chinese_PRC_CI_AS NULL,
        [city] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,
        [father] [nvarchar](6) COLLATE Chinese_PRC_CI_AS NULL,
     CONSTRAINT [PK_city] PRIMARY KEY CLUSTERED
    (
        [id] ASC
    )WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
    ) ON [PRIMARY]


    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/hakkani/archive/2006/06/18/810980.aspx

  • 相关阅读:
    Coursera机器学习week11 单元测试
    关于 TypeReference 的解释
    getModifiers 方法解释。
    instanceof isInstance isAssignableFrom 比较
    elasticsearch 基础 语法总结
    kibana 启动 关闭 和进程查找
    MD5 SHA1 SHA256 SHA512 SHA1WithRSA 的区别
    spring boot 项目 热启动
    java zip 压缩文件
    Packet for query is too large (1660 > 1024). You can change this value on the server by setting the max_allowed_packet' variable.
  • 原文地址:https://www.cnblogs.com/Godblessyou/p/1779207.html
Copyright © 2011-2022 走看看