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

原创 2007年10月01日 12:41:00
要在ASP.NET中实现AJAX,请先下载ajax.dll并引用,并且最好对AJAX的基本原理有所了解。有一本电子本叫《ajax基础教程》,网上有下的,讲得很清楚。里面代码是JAVA版,不过没有关系。下载地址(试试):
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!

 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

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

php & ajax 小例子——仿百度搜索自动完成下拉框

功能:1.输入字母,会通过ajax查询年后台信息,如果部分匹配了,就会以下拉框形式罗列。            2.点击下拉框选项,会选中该选项。            3.php...

JS获取input标签的text值、JS获取下拉框内容、input控制只能输入数字等问题汇总

1、在js中如何获取input标签的text值 var cgsl = document.getElementsByName("cgsl")[0].value;

js:可输入可选择的select下拉框,可及时匹配包含输入的内容(兼容ie)

js:可输入可选择的select下拉框,可及时匹配内容(兼容ie)

百度搜索框输入值后自动弹出的下拉框的测试(可应用到很多场景)

百度搜索框输入内容后,会匹配相关数据,弹出下拉框(共10条数据),看一下: 看一下如何测试: import java.util.List; import java.util.concurr...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)