ASP.NET学习网|ASP.NET教程|ASP.NET MVC|ASP.NET 源码|VS2010教程|ASP.NET视频教程

.仿Google自动提示SearchSuggess            .仿Google的搜索下拉框

1.suggest.js 复制代码保存为suggest.js在你需要的页面引用就行了

//建立跨浏览器的xmlHttp对象引用
    var xmlHttp;
    var k=-1;

    var success;
    try
    {
      xmlHttp=new XMLHttpRequest();

      success= true;
    }
    catch(e)
    {
        var XMLHTTP_IDS = new Array('MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP' );
        var success = false;
        for(var i=0;i<XMLHTTP_IDS.length&&!success;i++)
        {
            try {
                xmlHttp = new ActiveXObject(XMLHTTP_IDS[i]);
                success = true;
             }

            catch (e) {

                success = false;
            }
        }
       
        if (!success) {
             throw new Error('Unable to create XMLHttpRequest.');
        }
    }
   
   //得到页面使用的引用变量
        function initVars() {
            inputField = document.getElementById("FrmChangshang");           
            nameTable = document.getElementById("name_table");
            completeDiv = document.getElementById("popup");
            nameTableBody = document.getElementById("name_table_body");
            document.getElementById("popup").style.display="block";
        }
   //ajax前台触发函数
    function findNames(event) {
          var keyc=(window.navigator.appName=="Microsoft Internet Explorer")?event.keyCode:event.which;
          if(keyc!=40 && keyc!=38)
          {
                if (inputField.value.length > 0)
               {
                 var url = "SearchCompany.aspx?cname=" + escape(inputField.value) +"&rnd="+Math.random().toString();
                 xmlHttp.open("GET", url, true);
                 xmlHttp.onreadystatechange = callback;
                 xmlHttp.send(null);
                }
               else
               {
                    clearNames();
                }
            }  
        }
   //ajax回调函数
     function callback()
      {
            var names;
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200)
                {
     try
                    {
                        names=xmlHttp.responseXML.getElementsByTagName("name");
                    }
                    catch(e)
                    {
                        completeDiv.style.display="none";
                        clearNames();
                    }
                    k=-1;//重新从第一项开始往下选择
                    setNames(names);
                }
                else if (xmlHttp.status == 204)
                {
                    clearNames();
                }
            }
        }     
     //弹出层位置确定函数
     function divsOffset()
     {
          var inputWidth=inputField.offsetWidth;
          var inputHeight=inputField.offsetHeight;
          var inputTop=inputField.offsetTop;
          var inputLeft=inputField.offsetLeft;
          nameTable.style.width=inputWidth+"px";
          completeDiv.style.width=inputWidth+"px";
          completeDiv.style.top=(getTop(inputField)+inputHeight)+"px";
          completeDiv.style.left=getLeft(inputField)+"px";
          completeDiv.style.border = "#817f82 1px solid";
          completeDiv.style.position = "absolute";
          //获取元素的绝对纵坐标
          function getTop(e){
            var offset=e.offsetTop;
            if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
            return offset;
            }
        //获取元素的横坐标
          function getLeft(e){
            var offset=e.offsetLeft;
            if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
            return offset;
            }

          //alert(inputWidth+"----"+inputwidth+"----"+inputtopleft+"----"+inputtop);
     }
    //将返回数据添加到表格函数
    function setNames(the_names) {
        clearNames();
        divsOffset();
        for(var i=0;i<the_names.length;i++)
        {
           var nextNode=the_names[i].firstChild.nodeValue;
           var row  =document.createElement("tr");
           var cell =document.createElement("td");
           cell.onmouseout = function() {this.className="mouseOut";};
           cell.onmouseover =(function(tdi) {return function(){k=tdi;setStyle(k);}})(i);
           cell.setAttribute("bgcolor","#FFFAFA");
           cell.setAttribute("border","0");
           cell.setAttribute("style","font-size:15px");
           cell.onclick = function() { populateName(this); };
     //将nextNode添加到td
     var txtName = document.createTextNode(nextNode);
     cell.appendChild(txtName);
     row.appendChild(cell);
           nameTableBody.appendChild(row);
        }
    } 
    //点击选中一条数据，添加到inputField
    function populateName(cell) {
          //填充数据到web页面，cell---->td对象  
          inputField.value = cell.firstChild.nodeValue;
          clearNames();
    }
   //设置样式
   function setStyle(num)
    {
       var tBody = nameTableBody.getElementsByTagName("td");
       for(var i=0;i<tBody.length;i++)
        {  
           if(i>=0 && i<tBody.length&&i==num)
           {
                tBody[i].className="mouseOver"; 
           }
           else
           {
                tBody[i].className="mouseOut";
           }
        }
     }
  //获取键盘上下键
  function updown(e)
  {
      var tBody = nameTableBody.getElementsByTagName("td");
      var keyc=(window.navigator.appName=="Microsoft Internet Explorer")?e.keyCode:e.which;
        if(tBody==null)
            return;
        if(keyc==40)
         {
            k++;
            if(k>=tBody.length)
            {
              k=0;
            }
            inputField.value=tBody[k].firstChild.nodeValue; 
         }
        else if(keyc==38)
         {
            k--;
            if(k<=-1)
            {
              k=tBody.length-1;
            }    
             inputField.value=tBody[k].firstChild.nodeValue;       
          }
          setStyle(k);      
 }

  //清除列表数组
  function clearNames() {
        var ind = nameTableBody.childNodes.length;
        var completeDiv = document.getElementById("popup");
        for (var i = ind - 1; i >= 0 ; i--) {
             nameTableBody.removeChild(nameTableBody.childNodes[i]);
        }
        completeDiv.style.border = "none";
    }

(责任编辑：admin)