功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择
1.建立一aspx页面,html代码
<
HTML
>
<
HEAD
>
<
title
>
WebForm1
</
title
>
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
SCRIPT
language
="javascript"
>
//城市------------------------------
function cityResult()
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var city=document.getElementById("TextBox1");
WebForm1.GetCityList(city.value,get_city_Result_CallBack);
}
function get_city_Result_CallBack(response)
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if (response.value != null)
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
//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)
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
for(var i=0; i<ds.Tables[0].Rows.length; i++)
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
document.getElementById("DropDownList1").style.display="none";
}
return
}
function getData()
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var province=document.getElementById("DropDownList1");
var pindex = province.selectedIndex;
var pValue = province.options[pindex].value;
var pText = province.options[pindex].text;
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
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
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//// <summary>
/// Summary description for WebForm1.
/// </summary>
public class WebForm1 : System.Web.UI.Page
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
protected System.Web.UI.WebControls.TextBox TextBox1;
protected System.Web.UI.WebControls.DropDownList DropDownList1;
private void Page_Load(object sender, System.EventArgs e)
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));
if (!Page.IsPostBack)
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
this.TextBox1.Attributes.Add("onchange", "cityResult();");
this.DropDownList1.Attributes.Add("onclick", "getData();");
}
}
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
Web Form Designer generated code#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
this.Load += new System.EventHandler(this.Page_Load);
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
#endregion
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
GetCityList#region GetCityList
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public DataSet GetCityList(int provinceid)
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
string sql = "select * from city where father like '%" + provinceid + "%'";
return GetDataSet(sql);
}
#endregion
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
GetDataSet#region GetDataSet
public static DataSet GetDataSet(string sql)
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
string ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);
DataSet ds = new DataSet();
sda.Fill(ds);
return ds;
}
#endregion
![](https://singlepine.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
}
3.数据库脚本
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
]