Google搜索框风格[转]

最新推荐文章于 2021-05-12 13:56:20 发布

往事随風

最新推荐文章于 2021-05-12 13:56:20 发布

阅读量576

点赞数

分类专栏： JavaScript脚本

本文链接：https://blog.csdn.net/athenait/article/details/9227321

版权

JavaScript脚本专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>Google Suggest</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript" src="dwr/interface/T1.js"></script>
<script type="text/javascript">
var arrOptions = new Array();
 var theTextBox;
 var currentValueSelected = -1;//表当前选中的某项
 //以上设置一些全局变量
 window.onload = function(){
 var elemSpan = document.createElement("span");//在页面创建span标签
 elemSpan.id = "spanOutput";
 elemSpan.className = "spanTextDropdown";
 document.body.appendChild(elemSpan);
 document.Form1.txtUserInput.onkeyup = test1;//当按键抬起调用此函数
 }
  
function test1(){
   var intKey = -1;
        var temp="";
  if(window.event){
  intKey = event.keyCode;
  theTextBox = event.srcElement;//获得事件源
  }
 if(theTextBox.value.length == 0){
   HideTheBox();
   return false;
  }
  if(intKey == 13){//按回车键   
   SetText();
   theTextBox.blur();
   return false;
  }else if(intKey == 38){//按向上键 
   MoveHighlight(-1);
   return false;
  }else if(intKey == 40){ //按向下键 
   MoveHighlight(1);
   return false;
  }
 //if($("txtUserInput").value==""||$("txtUserInput").value==temp)return;
 T1.findmatches(//dwr技术，后台连接数据库
     $("txtUserInput").value,
  function(datas){
      arrOptions=datas;
   Bulid(arrOptions);//建立下拉框
   //temp = $("txtUserInput").value;
  }
 );
}
function Bulid(arrOptions){
        var inner="";
         SetElementPosition();//设置下拉框出现的位置
     for(var i=0; i < arrOptions.length; i++){
        inner+="<span id=arr_"+i+" class='spanNormalElement' οnmοuseοver='SetHighColor(this)' οnclick='SetText()'><font color=red>"+arrOptions[i]+"</font></span><br>";
   }
      document.getElementById("spanOutput").innerHTML = inner;
   if(inner!=""){
   document.getElementById("arr_0").className ="spanHighElement";//设置第一个顶为默认选中
   currentValueSelected=0;
   }else {HideTheBox();currentValueSelected=-1;}
}
function SetElementPosition(){//设置下拉框出现的位置
 var selectedPosX = 0;
 var selectedPosY = 0;
 var theElement = document.Form1.txtUserInput;
 var theTextBoxInt = document.Form1.txtUserInput;
 if (!theElement) return;
 var theElemHeight = theElement.offsetHeight;
 var theElemWidth = theElement.offsetWidth;
 while(theElement != null){
 selectedPosX += theElement.offsetLeft;
 selectedPosY += theElement.offsetTop;
 theElement = theElement.offsetParent;
 }
 xPosElement = document.getElementById("spanOutput");
 xPosElement.style.left = selectedPosX;
 xPosElement.style.width = theElemWidth;
 xPosElement.style.top = selectedPosY + theElemHeight
 xPosElement.style.display = "block";
}
 function MoveHighlight(xDir){//设置上下移动键
   var currnum=currentValueSelected+xDir;
  if(currnum >= 0 && currnum<arrOptions.length ){
      document.getElementById("arr_"+currentValueSelected+"").className ="spanNormalElement";
         document.getElementById("arr_"+currnum+"").className ="spanHighElement";
         currentValueSelected=currnum;
    }else if(currnum==arrOptions.length){
     document.getElementById("arr_"+currentValueSelected+"").className ="spanNormalElement";
           currentValueSelected=0;
           document.getElementById("arr_"+currentValueSelected+"").className ="spanHighElement";
          }else if(currnum==-1){
     document.getElementById("arr_"+currentValueSelected+"").className ="spanNormalElement";
           currentValueSelected=arrOptions.length-1;
           document.getElementById("arr_"+currentValueSelected+"").className ="spanHighElement";
          }
 }
function HideTheBox(){//隐藏下拉框
 document.getElementById("spanOutput").style.display = "none";
 currentValueSelected = -1;
}
function SetText(){//选中下拉框中的某个值
 theTextBox = document.Form1.txtUserInput;
 theTextBox.value = arrOptions[currentValueSelected];
 document.getElementById("spanOutput").style.display = "none";
 $("txtUserInput").setValue=theTextBox.value;
 currentValueSelected = -1; 
}
 
function SetHighColor(theTextBox){//当鼠标划过变为选中状态
 if(theTextBox){
  currentValueSelected =
  theTextBox.id.slice(theTextBox.id.indexOf("_")+1,
  theTextBox.id.length);
 }
 for(var i = 0; i < arrOptions.length; i++){
  document.getElementById('arr_' + i).className ='spanNormalElement';
 }
 document.getElementById('arr_'+currentValueSelected).className = 'spanHighElement';
}
</script>
</head>
<body > 
<div align="center">
<form name="Form1" autocomplete="off" ID="Form1" action="%">   
请输入: <input type="text" name="txtUserInput"/><input type="button" value="搜索"/>
</form>
</div>
</body>
</html>
 

style.css
span.spanTextDropdown{ position: absolute;
top: 0px;
left: 0px;
width: 150px;
z-index: 101;
background-color: #C0C0C0;
border: 1px solid #000000;
padding-left: 2px;
overflow: visible;
display: none;
}
span.spanMatchText{ text-decoration: underline;
font-weight: bold; }
span.spanNormalElement{ background: #C0C0C0; }
span.spanHighElement{ background: #000040;
color: white;
cursor: pointer; }