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

转载 2006年06月21日 15:17:00

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]

combobox自动提示组件添加无选中项清空功能

combobox自动提示组件添加无选中项清空功能

autocomplete+ajax+json实现自动补全功能

由于项目需要做自动补全功能,所以去学习使用autocomplete 先看公司原来的写法,使用 $("#projectName").autocomplete("../Handler...
  • Keima
  • Keima
  • 2016年05月24日 14:59
  • 375

ajax智能提示+textbox动态生成下拉框

快捷查询:按内管码按标记码 下面是引用的js文件 $(document).ready(function () { $("#fastsearchTxt").keyu...

原生ajax 实现输入框模糊查询,自动匹配数据库数据

1、页面代码如下 病人姓名: *   样式部分如下: .inputbox-text{folat:left; display:block;font-s...

Jfinal中实现Ajax动态添加下拉框数据

一起学习!一起成长!

反射效果,自己公司内部编码,在text上输入内容后,通过输入内容查询数据库,弹出下拉框

js页面:通过楦头编号光标移除事件,查询尺码 /** * 楦头编号点击事件,反射模糊查询 */ $(function(){ $("#sizeName").attr("hidden","hidd...

文本框(Textbox)和下拉框(Combobox)自动联想功能的实现

怎样使自己程序中的文本框或下拉框具有像百度和Google那样的自动联想功能?微软的TextBox和Combobox控件为我们提供了简便方法。 首先需要学习TextBox(或Combobox)的两个属...
  • dxd0128
  • dxd0128
  • 2013年08月15日 09:49
  • 1408

EasyUI下拉框实现多选、全选、复选和模糊查询

其实整个的思路还是很麻烦的。之前网上查不到能囊括上面所有东西的。但是参考之后还是摸出了一种新的方法,但是仍然不完美。毕竟是在封装的东西上面修改。...
  • iaiti
  • iaiti
  • 2016年09月03日 11:32
  • 10970

文本框(Textbox)和下拉框(Combobox)自动联想功能的实现

怎样使自己程序中的文本框或下拉框具有像百度和Google那样的自动联想功能?微软的TextBox和Combobox控件为我们提供了简便方法。 首先需要学习TextBox(或Combobox)的两个属性...

ThinkPHP +AJAX 联动从数据库无刷新提取数据,显示在页面的下拉框时出错!

错误是这样的,只要点击选择省的下拉框后,就会显示出这些文字,请问怎么才能消除这一问题呢 控制器代码  function show_ss(){             $area =M...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
举报原因:
原因补充:

(最多只允许输入30个字)