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

功能：在textbox中输入内容，动态从数据库模糊查询显示到下拉框中，以供选择

1.建立一aspx页面，html代码

< HTML >
< HEAD >
< title > WebForm1 </ title >
< SCRIPT language ="javascript" >
//城市------------------------------
functioncityResult()
{
varcity=document.getElementById("TextBox1");
WebForm1.GetCityList(city.value,get_city_Result_CallBack);
}

functionget_city_Result_CallBack(response)
{
if(response.value!=null)
{
//debugger;
document.getElementById("DropDownList1").style.display="block";
document.getElementById("DropDownList1").length=0;　　　　
　　　　vards=response.value;
if(ds!=null&&typeof(ds)=="object"&&ds.Tables!=null)
{
for(vari=0;i<ds.Tables[0].Rows.length;i++)
　　　　{
　　　　varname=ds.Tables[0].Rows[i].city;
　　　　　　varid=ds.Tables[0].Rows[i].cityID;
　　　　　　document.getElementById("DropDownList1").options.add(newOption(name,id));
　　　　}
}
}
else
{
document.getElementById("DropDownList1").style.display="none";
}
return
}

functiongetData()
{
varprovince=document.getElementById("DropDownList1");
varpindex=province.selectedIndex;
varpValue=province.options[pindex].value;
varpText=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>
///SummarydescriptionforWebForm1.
///</summary>
publicclassWebForm1:System.Web.UI.Page
{
protectedSystem.Web.UI.WebControls.TextBoxTextBox1;
protectedSystem.Web.UI.WebControls.DropDownListDropDownList1;

privatevoidPage_Load(objectsender,System.EventArgse)
{
Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));
if(!Page.IsPostBack)
{
this.TextBox1.Attributes.Add("onchange","cityResult();");
this.DropDownList1.Attributes.Add("onclick","getData();");
}
}

WebFormDesignergeneratedcode#regionWebFormDesignergeneratedcode
overrideprotectedvoidOnInit(EventArgse)
{
//
//CODEGEN:ThiscallisrequiredbytheASP.NETWebFormDesigner.
//
InitializeComponent();
base.OnInit(e);
}

/**////<summary>
///RequiredmethodforDesignersupport-donotmodify
///thecontentsofthismethodwiththecodeeditor.
///</summary>
privatevoidInitializeComponent()
{
this.Load+=newSystem.EventHandler(this.Page_Load);

}
#endregion

GetCityList#regionGetCityList
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
publicDataSetGetCityList(intprovinceid)
{
stringsql="select*fromcitywherefatherlike'%"+provinceid+"%'";
returnGetDataSet(sql);
}
#endregion
GetDataSet#regionGetDataSet
publicstaticDataSetGetDataSet(stringsql)
{
stringConnectionString=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
SqlDataAdaptersda=newSqlDataAdapter(sql,ConnectionString);
DataSetds=newDataSet();
sda.Fill(ds);
returnds;
}
#endregion

}
}

3. 源代码下载
4.数据库脚本

CREATE TABLE [ dbo ] . [ city ] (
[ id ] [ int ] NOT NULL ,
[ cityID ] [ nvarchar ] ( 6 )COLLATEChinese_PRC_CI_AS NULL ,
[ city ] [ nvarchar ] ( 50 )COLLATEChinese_PRC_CI_AS NULL ,
[ father ] [ nvarchar ] ( 6 )COLLATEChinese_PRC_CI_AS NULL ,
CONSTRAINT [ PK_city ] PRIMARY KEY CLUSTERED
(
[ id ] ASC
) WITH (IGNORE_DUP_KEY = OFF ) ON [ PRIMARY ]
) ON [ PRIMARY ]