Ajax实现textbox输入内容,动态从数据库中模糊查询显示在下拉框-WEB开发网
您的位置:网站主页> Ajax教程 > Ajax实现textbox输入内容,动态从数据库中模糊查询显示在下拉框

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

时间:2012-06-26 07:44:13   编辑:王连龙   文章来源: 已阅读:1770 次

<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]

本文地址:http://www.php186.com/content/article/ajax/354.html(转载请保留)

相关关键词搜索:Ajax实现textbox输入内容,动态从数据库中模糊查询显示在下拉框

查看评论更多>>
4楼 liujian 2015-04-21 17:34发表
好网站,值得收藏,以后会多多来看,很多文章内容都挺好的!
3楼 niulang 2015-04-21 17:33发表
不论国外,单是我们中国,各种各样的网站数不胜数。打开页面第一个看到的不是你的网站有什么,而是你的整体布局,一个清爽、干净、整洁的页面是一个赢得人心的法宝,大站有大站的气势,小站有小站的风格,好的视觉效果可以告诉人们这个站点有实力,这个站点值得信赖,给人很强的亲和力,有一种发现新宝地,希望赶紧收藏的冲动。
2楼 leenons 2015-04-21 17:28发表
现在看php学习网都会在百度上面找找看评分怎么样,值不值得一看;同时也会将看过的php教程网站记录,有时候留下一些自己的感想的评论,有很多逗比的评论,还有很多专业的评论,建议大家可以在web开发网上面寻找相关文章、api,大部分的内容都还合理。
1楼 xiaobudian 2015-04-21 17:25发表
网站文章挺不错的,值得学习,希望站长多多努力!
发表评论
      
* 以上用户言论只代表其个人观点,不代表www.php186.com网站的观点或立场
推荐文档更多

WEB开发网 | PHP教程 | Mysql教程 | Apache教程 | 最新文章 | PHP面试题| 网站地图 | Google地图 | Baidu地图 | 在线WEB论坛| 中纪委反腐最新消息

WEB技术QQ交流群:151888886 站长Q号:547218888
版权所有者:WEB开发网 地址:云南省文山州砚山县盘龙乡 滇ICP备12002707号-1
特别声明:本站内容仅供参考,不作为设计及确切依据!想了解更多,可立即进入Bbs提问