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

最新推荐文章于 2021-01-20 15:49:30 发布

菜菜_JING

最新推荐文章于 2021-01-20 15:49:30 发布

阅读量9.6k

点赞数

分类专栏： JAVASCRIPT/CSS 文章标签： string xmlhttprequest dataset callback 服务器 function

JAVASCRIPT/CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

这是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;
}