google搜索下拉框的dwr实现

Java代码  

<%@ 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' onmouseover='SetHighColor(this)' onclick='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; }

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。