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

F_andine

F_andine

2016-02-19 22:27

下面图老师小编要向大家介绍下Ajax实现在textbox中输入内容动态从数据库中模糊查询显示到下,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

  HTML
      HEAD
          titleWebForm1/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; ids.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
  /HTML2.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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

展开更多 50%)
分享

猜你喜欢

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

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

谈数据库中模糊数据的输入与判别

SQLServer
谈数据库中模糊数据的输入与判别

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

如何实现在一个Dbgrid中显示多数据库

编程语言 网络编程
如何实现在一个Dbgrid中显示多数据库

php录入页面中动态从数据库中提取数据的实现

PHP
php录入页面中动态从数据库中提取数据的实现

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

ajax 数据库中随机读取5条数据动态在页面中刷新

Web开发
ajax 数据库中随机读取5条数据动态在页面中刷新

用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中

Web开发
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Ajax实现分页查询

Ajax实现分页查询

怎样从电脑中卸载Windows一键还原?

怎样从电脑中卸载Windows一键还原?
下拉加载更多内容 ↓