js根据输入内容自动填充下拉框

这是AJAX的典型应用之一，即根据用户在输入框内输入的内容来搜索数据库，然后把内容显示出来，当然不一定非要显示在下拉框中，也可以放在其它的地方，我们这里只是把搜索到的内容填充到下拉框中，以便用户精确定位。效果图如下：



一.JS需调用服务器端方法及时响应客户端用户输入的内容

1.在页加载事件期间,通过Ajax.Utility.RegisterTypeForAjax注册包含服务端函数的类，假设页面后台是stuInfoView.aspx.cs，需要调用的服务器端函数也在此页面。

private void Page_Load(object sender, System.EventArgs e)

{

Ajax.Utility.RegisterTypeForAjax(typeof(stuInfoView));

}

2.给将要被JS调用的函数前面标上Ajax.AjaxMethodAttribute，由于以Attribute结尾的可以省略(见MSDN“元数据”)，也可以写成Ajax.AjaxMethod。假设需用到的服务端函数是getMatchedStuId()，则如下定义：

[Ajax.AjaxMethod()]

public static string[] getMatchedStuId(string stuId)

{

/*

* 接受JS参数stuId,然后搜索数据库，将满足条件的记录存入dataset再放到string数组中，返回给客户端JS，由JS接着处理(填充到下拉框中)

* 搜索数据库方法可以有多种

*/

DataSet ds = (new projClass()).getStuInfo();//返回一个dataset,即所有的记录

DataRow[] drs = ds.Tables["stuInfo"].Select("stuId like '"+stuId+"%'");//过滤

//将结果放入一个一个string数组中，返回给客户端的JS

if(drs != null)

{

string[] result = new string[drs.Length];

for(int i=0;i<drs.Length;i++)

result[i] = Convert.ToString(drs[i]["stuId"]);

return result;

}

return null;

}

二.用户输入内容后需马上响应到后台，输入框(tbx_query)需加上keyup事件，用户一输入值则把输入框的值传送到后台去搜索。

1.输入框(tbx_query)是服务器控件，后台加keyup事件如下：

this.tbx_query.Attributes.Add("onkeyup","matchStuId(this.value)");

2.keyup事件调用JS方法：

function matchStuId(stuId)

{

/*stuInfoView即后台的类名，getMatchedStuId是后台允许客户端JS调用的函数

*前面的参数是用到的参数，最后的参数是服务端返回的内容到达客户端后将要调用的JS函数，它接受服务器端返回的内容

*实际上就是XMLHttpRequest(AJAX技术的核心)对象readyStatus变为4时，客户端该怎么去处理服务器端返回的内容

*即调用JS方法CallBack处理返回的内容

*/

stuInfoView.getMatchedStuId(stuId,CallBack);

}

2.CallBack方法，接受后台函数传递的内容进行一系列处理：

function CallBack(response)//response是后台传递过来的内容，即后台函数getMatchedStuId返回的一个string数组

{

var matchddl = document.Form1.ddl;//前台填充值的下拉框，放在一个div中

if(response.value.length != 0)

{

setdiv();//对包含下拉框的div进行位置处理

matchddl.options.length = 0;

matchddl.size = response.value.length;

for(var i=0;i<response.value.length;++i)

matchddl.options[matchddl.options.length] = new Option(response.value[i]);//将string数组里面的元素填充到下拉框中

}

else document.getElementById("ddldiv").style.display = 'none';//如果服务器端没有返回内容，div不可见，即下拉框不可见

}

3.setdiv()对层进行处理的函数

function setdiv()

{

//根据输入框的位置来设置div的位置，不用解释了。

var tbx = document.Form1.tbx_query;

var ddldiv = document.getElementById("ddldiv");

ddldiv.style.display = '';

if(tbx.value =="")//输入框输入内容为空时，下拉框也不可见

ddldiv.style.display='none';

var etop = tbx.offsetTop;

var eleft = tbx.offsetLeft;

ddldiv.style.top = etop+180;

ddldiv.style.left = eleft+35;

}

4.下拉框点击事件

function selectthis(sel)

{

//用户点击一条下拉框记录，则将点击的记录显示到输入框中

document.getElementById('tbx_query').value = sel.options[sel.selectedIndex].text;

}

三.客户端放入下拉框的DIV层

<div id="ddldiv" style=" display: none;z-index: 99;position: absolute"><select id="ddl" onclick="selectthis(this)"></select></div>

本文转自：http://blog.csdn.net/JOHNCOOLS/article/details/1497031