现在的位置: 首页 > 综合 > 正文

仿google的suggest

2012年08月22日 ⁄ 综合 ⁄ 共 3235字 ⁄ 字号 评论关闭
<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!="")
     

抱歉!评论已关闭.