當(dāng)前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

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

發(fā)布時(shí)間：2023/11/27 生活经验 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

功能：在textbox中輸入內(nèi)容，動(dòng)態(tài)從數(shù)據(jù)庫(kù)模糊查詢顯示到下拉框中，以供選擇

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

????????GetCityList
????????GetDataSet

????}
} 3.源代碼下載???
4.數(shù)據(jù)庫(kù)腳本
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]

?

總結(jié)

以上是生活随笔為你收集整理的Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Ajax实现无刷新树
下一篇： Ajax实现DataGrid/DataL