仿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

查看全文

相关阅读:
Maven 环境的配置
 zTree的简单例子
 plsql免安装客户端的配置
 HDU 1232 畅通工程
 HDU 5698 瞬间移动
 Codeforces 1015E1 Stars Drawing (Easy Edition)
Codeforces 784B Santa Claus and Keyboard Check
Codeforces 500C New Year Book Reading
NSarray 赋值拷贝等问题记录
 UINavigationController 操作记录

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