Ajax實現在textbox中輸入內容,動態從數據庫中模糊查詢顯示到下拉框中

          Ajax實現在textbox中輸入內容,動態從數據庫中模糊查詢顯示到下拉框中
          http://www.cnblogs.com/singlepine/archive/2006/05/21/405566.html

          功能:在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.源代碼下載 http://singlepine.cnblogs.com/Files/singlepine/ajaxselect.rar   
          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]

          posted on 2007-06-20 13:25 chenguo 閱讀(478) 評論(0)  編輯  收藏 所屬分類: AJAX Dev

          <2025年7月>
          293012345
          6789101112
          13141516171819
          20212223242526
          272829303112
          3456789

          導航

          統計

          留言簿

          隨筆分類(1)

          文章分類(52)

          好友 小山的博客

          最新隨筆

          最新評論

          主站蜘蛛池模板: 清远市| 丰台区| 神池县| 鹤庆县| 盐津县| 洮南市| 岑巩县| 宜川县| 水富县| 日土县| 清水河县| 磴口县| 东光县| 民勤县| 图木舒克市| 乡宁县| 韩城市| 孝感市| 大庆市| 察雅县| 广东省| 运城市| 新津县| 彩票| 潍坊市| 山阳县| 辽宁省| 柳州市| 邳州市| 衡阳县| 喜德县| 黔东| 莱芜市| 清新县| 富源县| 浪卡子县| 衡水市| 通州区| 新营市| 海晏县| 务川|