功能：在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>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 GetCityList GetDataSet }}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]
