AJAX基本应用之:根据输入内容自动填充下拉框

要在ASP.NET中实现AJAX,请先下载ajax.dll并引用，并且最好对AJAX的基本原理有所了解。有一本电子本叫《ajax基础教程》，网上有下的，讲得很清楚。里面代码是J***A版，不过没有关系。下载地址(试试)：
http://www.bomoo.com/ebook/ebook.php/5045.html
http://www.leafz.com/article.asp?id=2239

这是AJAX的典型应用之一，即根据用户在输入框内输入的内容来搜索数据库，然后把内容显示出来，当然不一定非要显示在下拉框中，也可以放在其它的地方，实际上这就是JavaScript控制的部分了。

比如我觉得CSDN论坛可以加上这个功能，当发贴者要发贴问问题时，可以用AJAX根据用户输入的内容动态的到后台查询数据库，将查询到的结果，也就是类似的问题显示在页面上，这样用户根据搜索到的帖子就可以把问题解决掉，可以节约时间。

我们这里只是把搜索到的内容填充到下拉框中，以便用户精确定位。效果图以前发过。如下：用户输入学号，动态填充填充下拉框。




一.AJAX可以用JavaScript来调用服务器端方法，如果要想使服务器端的方法被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要调用的函数。实际上是接受JS参数stuId,然后搜索数据库，
* 将满足条件的记录存入dataset再放到string数组中，再返回给客户端JS，由JS接着处理(填充到下拉框中)
* 下面的搜索只是方法之一
* 实际上最好用SQL语句(like)直接把相关记录搜索出来
*/
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事件，用户一输入值就把输入框的值送到后台去搜索。由于是服务器控件，加keyup事件如下：(在CS文件中)

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

三.客户端JavaScript代码

1.matchStuId(stuId),这就是keyup事件，只要焦点在tbx_query中，并且用户按下了键盘，即调用此函数。

function matchStuId(stuId)
{
/*关于下面的这一句可能好多人不明白，stuInfoView即后台的类名了，getMatchedStuId是后台允许客户端JS调用的函数
*但是你可能要问，后台只有一个参数，怎么这里有两个？小山的blog上的确有人这样问
*可以这样解释，前面的参数是用到的参数，最后的那个是服务端返回的内容到达客户端后将要调用的JS函数，它接受服务器端返回的内容
*实际上就是XMLHttpRequest(AJAX技术的核心)对象readyStatus变为4时，客户端该怎么去处理服务器端返回的内容
*我们用CallBack这个JS函数来处理返回的内容，下面会提到，于是这样写。说得很清楚吧。
*/
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;

}

四.客户端层与下拉框的HTML代码，这段代码随便扔在哪里面都可以，反正它在页面上显示的位置不是它自己决定的。

<div id="ddldiv" style=" DISPLAY: none;Z-INDEX: 99;POSITION: absolute"><SELECT id="ddl" onclick="selectthis(this)"></SELECT></div>

over！