• 仿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语言编码规范(Java Code Conventions) 转载
    Flex 彻底屏蔽右键 (转载)
    JAVA 读取文件(收集)
    可以运行SWT的精简版JRE 1.4.2_04, 压缩后仅1.3MB[整理]
    转载:多核平台下的JAVA优化
    森林消防智慧预警:火灾监测 Web GIS 可视化平台
    绿色数字园区运维:一屏群集 3D 可视化智慧楼宇
    js删除json key
    学习、应用Web标准一路走来——《重构之美》原创系列文章快速入口。
    中国互联网的鱼死网破新时代。
  • 原文地址:https://www.cnblogs.com/zjba2/p/1177657.html
Copyright © 2020-2023  润新知