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](王朝网络 wangchao.net.cn)

  • 相关阅读:
    C++11模板类使用心得
    Linux下MakeFile初探
    Leetcode 35 Search Insert Position 二分查找(二分下标)
    Leetcode 4 Median of Two Sorted Arrays 二分查找(二分答案+二分下标)
    数据库分库分表的应用场景及方法分析
    DB主从一致性的几种解决方法
    Redis主从复制和集群配置
    RPC vs RESTful
    Mysql锁详解
    BIO与NIO、AIO的区别
  • 原文地址:https://www.cnblogs.com/ayforver/p/3491972.html
Copyright © 2011-2022 走看看