服务器维护网站维护数据维护系统安全配置
专业定制网站企业建站一条龙、软件定制开发、系统集成
稳定虚机备案一条龙，稳定快捷通道
服务理念诚信守诺客户至上专业精神专心贯注

Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中

作者：黑客防线网安Ajax教程基地来源：黑客防线网安Ajax教程基地浏览次数：0

黑客防线网安网讯：　　功能：在textbox中输入内容，动态从数据库模糊查询显示到下拉框中，以供选择　　1.建立一aspx页面，html代码　　<HTML>　　 <HEAD>　　 <title>WebForm1</title>　　 ...

　　功能：在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]