zjba2

博客园 首页 新随笔 联系 订阅 管理
仿google的suggest
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
<script language="javascript">

var DivName="";//弹出DIV的名称
//单击单元格赋值
function clickTD(val)
{
     document.getElementById("txt1").value=val;
     document.getElementById("txt1").focus();
     DivNone();
}

//给控件赋值    
function givNumber( index )
{

       document.getElementById("txt1").value = arr[index];

       document.getElementById("txt1").focus();              
}

//判断键盘按的方向
function catchKeyBoard()
{
    var keyNumber = event.keyCode;

    if(keyNumber =='40') //向下 
    {

        if(menuFocusIndex == 10)
         {
          return true;
         }
         else if (menuFocusIndex == null) //当焦点在文本框中间时，按向下跳到第一个主体。
         {
           forceMenuItem(1);
           givNumber(0);
         }
         else
         {
             forceMenuItem( menuFocusIndex+1 ); //焦点增加1
             givNumber(menuFocusIndex-1);
          } 

    }
    else if(keyNumber == '38')//向上
    {
        if(menuFocusIndex == 1)
        {
          forceMenuItem(menuFocusIndex-1); //当焦点在第一个主体时，按向上让它回到文本框。
         }
        else
        {
          forceMenuItem(menuFocusIndex-1); //焦点减少1
          givNumber(menuFocusIndex-1);
        } 

    }
}
//改变菜单项的颜色
var menuFocusIndex;
function forceMenuItem(index)
{

      lastMenuItem = document.getElementById( "menuItem" + menuFocusIndex )

       if (lastMenuItem != null )
       {

         //将上一个变白

         lastMenuItem.style.backgroundColor="white";       

         lastMenuItem.style.color="#000000";

       }

       var menuItem = document.getElementById( "menuItem" + index );

       if ( menuItem == null )

        {

          document.getElementById("txt1").focus(); 

        }

        else 

        {

         menuItem.style.backgroundColor = "#5555CC";

         menuItem.style.color = "#FFFFFF";

         menuFocusIndex = index;

      }

}


//隐藏层
function DivNone()
{
document.getElementById(DivName).style.display="none";

}
//显示层
function DivShow()
{
document.getElementById(DivName).style.display="";


}

//创建显示层
function createMenu(textBox, menuid)
{ 

       if( document.getElementById( menuid ) == null )

       {

         var left_new=getPosition(textBox)[1]

         var top_new=getPosition(textBox)[0];          

         var newControl = document.createElement("div"); //创建层      

         newControl.id = menuid;        

         document.body.appendChild( newControl );       

         newControl.style.position = "absolute"; 

         newControl.style.border = "solid 1px #000000";

         newControl.style.backgroundColor = "#FFFFFF";

         newControl.style.width = textBox.clientWidth + "px"; //绝对宽度

         newControl.style.left = left_new + "px";           //位置

         newControl.style.top = (top_new + textBox.clientHeight + 2) + "px";  //注意，将此高度加2是为了解决JS出现的非自然因素…        

         return newControl;

       }
       else
       {
         
         return document.getElementById(menuid);
         
        }
}
//取得输入框所在的位置
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 suggest(textBox, menuid,val)
{
     if(val!="")
     {
              var keyNumber = event.keyCode;
              if(keyNumber!='40'&&keyNumber!='38')
               {
                   DivName=menuid;
                   var obj=createMenu(textBox, menuid);
                   DivNone();
                   getData(val);
                   obj.innerHTML='';
                   obj.innerHTML=handlejs();
                   DivShow();
               }
               else
               {
                     catchKeyBoard();

                }
      }

} 


//创建xmlHTTPRequest
function getData(va)
{
  
 
    var url='result.aspx?name='+va;
    obj=CreateAJAX();
    if(obj)
    {
      obj.onreadystatechange=handlejs;
      obj.open('get',url,true);
      obj.send(null);
    }
    else
     alert("创建AJAX对象失败！");
  
}
//用数组来创建
function createMenuBody( key )

    {

      var result = "";

      var j = 0;

      arr = getSearchResult( key ); //获取相应的数组

       //最多显示十行数据

      if(arr.length > 10)

      {

        j = 10;

      }

      else

      {

        j = arr.length;

      }

      for ( var i = 0; i < j; i++ ) //循环创建层的主体

        result += "<table border=\"0\" cellpadding=\"2\" cellspacing=\"0\" id=\"menuItem"+(i+1)+"\" onmouseover=\"forceMenuItem( "+(i+1)+");\" width=\"100%\" onclick=\"givNumber("+i+")\"><tr><td align=\"left\">" + arr[i] + "</td><td align=\"right\">" + (i+1) + " </td></tr></table>";

       return result;

    }


function handlejs()
{  var result="";
   var myinnerhtml="";
   if(obj.readyState==4)
   { 
      if(obj.status==200)
      {               
        if(obj.responseXML)
       {
             xml=obj.responseXML;
             node=xml.getElementsByTagName('content')[0];
              var j=0;
              if(node.childNodes.length>10)
              {
                 j=10;
              }
              else
              {
                 j=node.childNodes.length;
              }
              for(var i=0;i<j;i++)
              {
                 username=xml.getElementsByTagName('UserName')[i].firstChild.nodeValue;
                 passwd=xml.getElementsByTagName('Passwd')[i].firstChild.nodeValue;
         
                 result += "<table border=\"0\" cellpadding=\"2\" cellspacing=\"0\" id=\"menuItem"+(i+1)+"\" onmouseover=\"forceMenuItem( "+(i+1)+");\"  width=\"100%\" onclick=\"clickTD('"+username+"');\"><tr><td align=\"left\">" + username + "</td><td align=\"right\">" + (i+1) + " </td></tr></table>";
      
              }
             return result;
           
         }//对于obj.responseXML
      }//对于obj.status 
      else 
        alert("请求的文件出错，请检查！");                     
   }   
}
//创建AJAX
function CreateAJAX()
{  
  if(typeof(XMLHttpRequest)!="undefined")
     return new XMLHttpRequest();
  if(window.ActiveXObject)
  {
     var objs=["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHTTP"];    
     var xmlhttp;
     for(var i=0;i<objs.length;i++)
     {
       try
       {
         xmlhttp=new ActiveXObject(objs[i]);
         return xmlhttp;
       }
       catch(e)
       {
         //do nothing
       } 
     }
   }  
}

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input id="txt1" name="txt1" onkeyup="suggest(this,'suggest',this.value)"/>
    </div>
    </form>
</body>
</html>
通过AJAX获取XML文件
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="result.aspx.cs" Inherits="result" %>


确保前台部分没有其他HTML干扰。
protected void Page_Load(object sender, EventArgs e)
    {
        Response.Clear();
        Response.ContentType = "text/xml";
        Response.Charset = "utf-8";
        this.CreateXml();

    }
    protected void CreateXml()
    {
        string name =string.Empty;
       // string name = "8";
        if (Request.QueryString["name"] != null)
        {
            name = Request.QueryString["name"];
        }
        
        DataTable dt = Admin.GetTableAdmin(name);
        StringBuilder sb = new StringBuilder();
        sb.AppendLine(@"<?xml version='1.0' encoding='UTF-8' ?>");
        sb.AppendLine(@"<content>");
        if (dt.Rows.Count > 0)
        {
            foreach (DataRow dr in dt.Rows)
            {
                sb.AppendLine(@"<response>");
                sb.AppendLine(@"<UserName>"+dr["username"].ToString()+"</UserName>");
                sb.AppendLine(@"<Passwd>"+dr["passwd"].ToString()+"</Passwd>");
                sb.AppendLine(@"</response>");
            }
        
        
        }
        sb.AppendLine(@"</content>");
        Response.Write(sb.ToString());
    }

这个具体取得数据由大家自己根据个人的情况来取得。
发上效果图：

上面具体javascript各位可以自己看着修改，也可以用数组存储数据，这样就支持键盘的上下了。某些javascript代码参考了
http://www.cnblogs.com/ustbwuyi/archive/2006/07/17/452700.html
posted on 2008-04-30 13:55  猫猫  阅读(299)  评论(0)    收藏  举报