仿google的suggest

zoukankan html css js c++ java

仿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

查看全文

相关阅读:
进程线程协程
 面向对象完善总结
 面向对象编程
 常用模块2
python常用模块
 随机验证码模块（random）
带有key参数的函数filter，map，max，min
python内置函数、匿名函数、递归
 python迭代器与生成器
 如何添加title左侧的图标

原文地址：https://www.cnblogs.com/zjba2/p/1177657.html