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
  • 相关阅读:
    Java中Date和Calender类的使用方法
    看《做性能测试需要做些什么》
    【笔记】jquery append，appendTo，prepend，prependTo 介绍
    【实践】jquery实现滑动动画及轮播
    【实践】四联联动 + 更加优化
    【实践】jQuery实现三联联动
    关于导入excel报错的处理（xls，xlsx）
    递归算法及经典案例
    验证身份证真假
    正则表达式
  • 原文地址：https://www.cnblogs.com/zjba2/p/1177657.html
Copyright © 2011-2022 走看看