功能:在textbox中輸入內(nèi)容,動態(tài)從數(shù)據(jù)庫模糊查詢顯示到下拉框中,以供選擇
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>
///
SummarydescriptionforWebForm1.
///
</summary>
public
class
WebForm1:System.Web.UI.Page
{
protected
System.Web.UI.WebControls.TextBoxTextBox1;
protected
System.Web.UI.WebControls.DropDownListDropDownList1;
private
void
Page_Load(
object
sender,System.EventArgse)
{
Ajax.Utility.RegisterTypeForAjax(
typeof
(WebForm1));
if
(
!
Page.IsPostBack)
{
this
.TextBox1.Attributes.Add(
"
onchange
"
,
"
cityResult();
"
);
this
.DropDownList1.Attributes.Add(
"
onclick
"
,
"
getData();
"
);
}
}
WebFormDesignergeneratedcode
#region
WebFormDesignergeneratedcode
override
protected
void
OnInit(EventArgse)
{
//
//
CODEGEN:ThiscallisrequiredbytheASP.NETWebFormDesigner.
//
InitializeComponent();
base
.OnInit(e);
}
/**/
///
<summary>
///
RequiredmethodforDesignersupport-donotmodify
///
thecontentsofthismethodwiththecodeeditor.
///
</summary>
private
void
InitializeComponent()
{
this
.Load
+=
new
System.EventHandler(
this
.Page_Load);
}
#endregion
GetCityList
#region
GetCityList
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public
DataSetGetCityList(
int
provinceid)
{
string
sql
=
"
select*fromcitywherefatherlike'%
"
+
provinceid
+
"
%'
"
;
return
GetDataSet(sql);
}
#endregion
GetDataSet
#region
GetDataSet
public
static
DataSetGetDataSet(
string
sql)
{
string
ConnectionString
=
System.Configuration.ConfigurationSettings.AppSettings[
"
ConnectionString
"
];
SqlDataAdaptersda
=
new
SqlDataAdapter(sql,ConnectionString);
DataSetds
=
new
DataSet();
sda.Fill(ds);
return
ds;
}
#endregion
}
}
3.
源代碼下載
4.數(shù)據(jù)庫腳本
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
]