Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择
1.建立一aspx页面,html代码
WebForm1//城市------------------------------
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
{
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("").innerText=pText;
}
2.cs代码
using System;
using System.Collections;
using http://doc.xuehai.netponentModel;
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 description for WebForm1.
///
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.At