google搜索下拉框的dwr实现

最新推荐文章于 2011-01-17 11:19:21 发布

huang_feilong

最新推荐文章于 2011-01-17 11:19:21 发布

阅读量136

点赞数

分类专栏： java 文章标签： Google DWR CSS

java 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

[color=darkred]



<%@ 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; }

[/color]

huang_feilong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
google搜索下拉框的dwr实现

[color=darkred][code="java"]Google Suggestvar arrOptions = new Array(); var theTextBox; var currentValueSelected = -1;//表当前选中的某项 //以上设置一些全局变量 window.onload = function()...
复制链接

扫一扫