实现google的下拉列表效果

最简做了个实现google下拉效果的程序，这样的程序网上挺多，但是代码不少，需要慢慢看。这里贴一下我的，这个代码借鉴 http://www.cnblogs.com/ustb*/archive/2006/07/17/452700.aspx的博客的代码，做了一下必要的修改。

1 js代码，这个代码主要是对于下拉列表的生成和操作，以及调用ajax接口

var menuFocusIndex; //当前选中行
var arrylist;//当前返回数组
var resultlength=0;//当前数组长度
function getPosition(obj)//获取当前操作坐标
{
    var top = 0,left = 0;
    do
    {
       top += obj.offsetTop;
       left += obj.offsetLeft;
    }
    while ( obj = obj.offsetParent );
    var arr = new Array();
    arr[0] = top;
    arr[1] = left;
    return arr;
}

function createMenuBody(resultlist)//根据返回数组生成div中行
{

function pareseResultText()//ajax方法获取
{
    var result = this.req.responseText;
    if(result)
    {
        eval(result);
    }
}

2 公用js的ajax对象，由上一部分代码调用

//
//公用Ajax请求对象
//
var Ajax = {
    LoadContent:function(url,onload,onerror,sendData,dataType,requestType,callBackGuid)
    {
        this.url = url;
        this.req = null;
        this.data;
        this.onload = onload ;
        this.onerror = onerror?onerror:this.defaultError;
        this.sendData = sendData;
        this.dataType =dataType || "xml";
        this.requestType = requestType;
        this.callBackGuid = callBackGuid;

this.LoadXml(url);

    },
    Request:
    function(url,onLoad,onError,
        sendData,dataType,requestType,callBackGuid){

        new Ajax.LoadContent(url,onLoad,onError,sendData,dataType,requestType,callBackGuid);
    },
    ProcSubmit :
    function(url,fromId,onCallBack,onError,callBackGuid)
    {
        var obj=$(fromId);
        var str="";
        for(i=0;i<obj.elements.length;i++)
        {
            e=obj.elements[i];
            if(e.type=="text"
            ||e.type=="hidden"
            ||e.type=="textarea"
            ||e.type=="password"){
                str+="&"+e.name+"="+escape(e.value);
            }else if(e.type=="radio"){
                if(e.checked){
                    str+="&"+e.name+"="+escape(e.value);
                }
            }else if(e.type=="select-one"){
                str+="&"+e.id+"Id="+escape(e.options[e.selectedIndex].value);
                str+="&"+e.id+"Name="+escape(e.options[e.selectedIndex].text);
            }
        }
        str=str.replace(str.substring(0,1),"");
        Ajax.Request(url,onCallBack,onError,str,'text',null,callBackGuid);
    }
}

//
//自定义内容属性
//
Ajax.LoadContent.prototype ={
    LoadXml:function(url){
        if(window.ActiveXObject){
            for(var i in this.XmlHttpType){
                    try{
                        this.req = new ActiveXObject(this.XmlHttpType[i]);break;
                    }catch(e){
                        continue;
                    }
                }
            }else if(window.XMLHttpRequest){
                    this.req = new XMLHttpRequest();
             }
             if(this.req){
                var tempLoad = this;
                this.req.overrideMimeType?this.req.overrideMimeType("text/xml"):null;
                this.req.onreadystatechange =function(){
                    tempLoad.ReadyStateChange.call(tempLoad);
             }
            if(this.sendData){
                this.req.open("POST",this.url,true);
                if(this.requestType && this.requestType.toLowerCase()=="xml"){
                    this.req.setRequestHeader("Content-Type","text/xml; charset=gb2312");
                }
                else{
                    this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                }
            }else{
                this.req.open("GET",this.url+'&xmlRequest=cmd',true);//temp add cmd
            }
            if(this.requestType
            &&this.requestType.toLowerCase()=="xml"){
                  this.req.send(this.sendData);
            }
            else{
                  this.req.send(this.sendData);
            }
         }

    },
    XmlHttpType:{
        msxml2:"MSXML2.XMLHTTP",
        msxml2_5:"MSXML2.XMLHTTP.5.0",
        msxml2_3:"MSXML2.XMLHTTP.3.0",
        msxml2_4:"MSXML2.XMLHTTP.4.0",
        micxmlhttp:"Microsoft.XMLHTTP"
     },
     ReadyStateChange:function(){
        if(this.req.readyState == 4){
            if(this.req.status == 200 || this.req.status == 0){
                if(this.dataType.toLowerCase()=="xml"){
                }else{
                }
                this.onload.call(this,this.callBackGuid);
            }else{
                this.onerror.call(this);
            }
        }

     },
     GetLoadData:function(){
        return this.data;
     },
     defaultError:function(){
        alert('error .. ResponseHeads='+this.req.getAllResponseHeaders());
     }
}
Ajax.pro =function (){alert('f');}
3 页面中事件引发按钮

<input id="inputer" type="text" onkeyup= "DisplayUserInformation()" style="width: 158px; height: 20px"/>
4 后台代码逻辑处理，返回str字符串

private void inidata()
        {
            string requeststring = Request.QueryString["qs"].Trim().Replace(" ","").Replace("　","");
            string str = string.Empty;
            DataTable dt = Class1.getdataview();
            str = "CreateUserInfo({12:'";
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                if (dt.Rows[i]["学生班级"].ToString().StartsWith(requeststring))
                    str += dt.Rows[i]["学生班级"] + "~";
            }
            str += "'})";
            EndResponse(str);
        }
        private void EndResponse(string val)
        {
            Response.Clear();
            Response.Write(val);
            Response.Flush();
            Response.End();
        }
至此google的下拉功能大致实现，至于后台搜索关键字的方法当然是随便写的。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/keyake863/archive/2008/04/09/2268496.aspx

秒客网

实现google的下拉列表效果

相关文章