asp.net+ajax仿搜索提示效果代码

JS代码：

 

//创建一个xmlhttp对象
function createXmlHttp()
{
    var xmlHttp;
    // 检测MSXMLHTTP版本，为了兼容IE各个版本
    var activeKey = new Array("MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP");
    if(window.ActiveXObject)
    {
       for(var i=0;i<activeKey.length;i++)
       {
          try
          {
              xmlHttp = new ActiveXObject(activeKey[i]);
              if(xmlHttp!=null)
                 return xmlHttp;
          }
          catch(error)
          {
              throw new Error("您的浏览器版本过低，请更新浏览器");
          }
       }
    }
    else if(window.XMLHttpRequest)
    {
       xmlHttp = new XMLHttpRequest();
    }
    return xmlHttp; 
}

var queryField;
var globalDiv;
var divName="globalDiv";
var xmlDoc;
var xmlhttp=null;
var array=new Array();

//初始化函数
function ini(textid)
{
  queryField=document.getElementById(textid);
  queryField.οnkeyup=keyhand;
}
//松开键盘事件
function keyhand()
{
  //var textvalue=document.getElementById("Text1").value;
  var textvalue=queryField.value;
  //判断是否按的是向上 向下键  或tab键 回车键
   if(event.keyCode!=13&event.keyCode!=9&event.keyCode!=38&event.keyCode!=40)
   {
        if(textvalue.length>0)
        {
           postRequest(textvalue);
        }
        else
        {
            getDiv(divName);
            hiddenDiv();
            document.getElementById("ddlCengWei").options.length=0;
            document.getElementById("ddlCSRQ").options.length=0;
        }
   }
 
}

//与服务端通信
function postRequest(obj)
{
    var URL="Server.aspx?action=search&data="+obj;
    xmlhttp = createXmlHttp();
    xmlhttp.Open("POST",URL, true);
    //响应服务端函数
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState == 4)
         {
           if(xmlhttp.status==200)
           {
               xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
               xmlDoc.loadXML(xmlhttp.responseText);
               array.length=0;
               //获得服务器返回的结果
                var res= xmlDoc.documentElement.selectNodes("result");
                 for(var i=0;i<res.length;i++)
                 {
                     array[i]=res[i].text;
                 }
                 if(array.length>0)
                 {
                    getDiv(divName);
                    showQueryDiv(array);
                 }
                 else
                 {
                    getDiv(divName);
                    hiddenDiv();
                 }
            }
         }
    }
    xmlhttp.SetRequestHeader ("Content-Type","text/xml; charset=GB2312");           
    xmlhttp.Send(null);
}
//创建显示DIV
function getDiv(divId)
{
  if(!globalDiv)
  {
    var newNode=document.createElement("div");
    newNode.setAttribute("id",divId);
    document.body.appendChild(newNode);
    globalDiv=document.getElementById(divId);
  }
  var x=queryField.offsetLeft;
  var y=queryField.offsetTop+queryField.offsetHeight;
  var parent=queryField;
  while(parent.offsetParent)
  {
    parent=parent.offsetParent;
    x+=parent.offsetLeft;
    y+=parent.offsetTop;
  }
 
  globalDiv.style.border="2px solid #ccc";
  globalDiv.style.position="absolute";
  globalDiv.style.left=x+"px";
  globalDiv.style.top=y+"px";
  globalDiv.style.width="100px";
  globalDiv.style.cursor="default";
  globalDiv.style.color="Black";
 
  return globalDiv;
 
}
//显示查询数据
function showQueryDiv(resultArray)
{
  var parentDiv=getDiv(divName);
  parentDiv.style.display="block";
  while(parentDiv.childNodes.length>0)
  {
    parentDiv.removeChild(parentDiv.childNodes[0]);
  }
  for(i=0;i<resultArray.length;i++)
  {
    sonDiv=document.createElement("div");
    sonDiv.innerHTML=resultArray[i];
    sonDiv.οnmοusemοve=divMove;
    sonDiv.οnmοuseοut=divout;
    sonDiv.οnmοusedοwn=divdown;
    //sonDiv.οnkeydοwn=beKeyDown;
    parentDiv.appendChild(sonDiv);
  }
}

function divout()
{
  var mydiv=this;
  mydiv.style.backgroundColor="";
}
//鼠标移到选项的效果
function divMove()
{
  var mydiv=this;
  mydiv.style.backgroundColor="Blue";
}
//鼠标点击事件
function divdown()
{
  var mydiv=this;
  queryField.value=mydiv.innerHTML;
  globalDiv.style.display="none";
}
//没有相应数据隐藏DIV
function hiddenDiv()
{
    globalDiv.style.display="none";
    globalDiv.innerHTML="";
}

//方向键接收函数
function beKeyDown()
{
    //往向下键
    if (event.keyCode==40)
    {
        divMove();
    }
    //往向上按
    if (event.keyCode==38)
    {
        divMove();
    }
    //按回车或者TAB
    if (event.keyCode==13||event.keyCode==9)
    {
        divdown();
    }
}

 

在页面onload事件中添加引用：<body οnlοad="ini('txtJingHao');">

<asp:TextBox ID="txtJingHao" runat="server" Width="100px" style="z-index: 100;" ><asp:TextBox>

Server.aspx.cs 代码：

 

protected void Page_Load(object sender, EventArgs e)
        {
            if (!string.IsNullOrEmpty(Request.QueryString["action"]))
            {
                string str = Request.QueryString["action"].ToString();
                switch (Request.QueryString["action"].ToString())
                {
                        case "search":  //查询
                        GetResult();
                        break;
                 }
            }
        }

 

 

 /// <summary>
        /// 查询
        /// </summary>
        private void GetResult()
        {
            string res = "";
            ProjectInfoBLL PIBll = new ProjectInfoBLL();
            string data = Request.QueryString["data"].ToString();
            DataTable objTable = PIBll.GetProjectInfosByJingHao(data);
            int rowCount = objTable.Rows.Count;
            //输出数据
            res = "<root>";
            if (rowCount > 0)
            {
                for (int i = 0; i < rowCount; i++)
                {
                    res += "<result>";
                    res += objTable.Rows[i][0].ToString().Trim();
                    res += "</result>";
                }
            }
            res += "</root>";
            Response.Clear();
            Response.ContentType = "text/xml";
            Response.ContentEncoding = System.Text.Encoding.GetEncoding("GB2312");
            Response.Write("<?xml version=/"1.0/" encoding=/"GB2312/" ?>");
            Response.Write(res);
            Response.End();
        }