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