WEB开发网
开发学院WEB开发Ajax Ajax实现在textbox中输入内容,动态从数据库中模糊... 阅读

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

 2007-03-20 11:16:47 来源:WEB开发网   
核心提示:功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中,以供选择1.建立一aspx页面,html代码 <HTML> <HEAD> <title>WebForm1</title>

功能:在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]

Tags:Ajax 实现 textbox

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接