goole suggest实例
在平常使用goole、baidu时并没有非常注意他们的搜索条件，也没太关心他们能够提供根据你的输入来进行行下拉选单的提示的功能，只是觉得用起来很方便。
前段时间，看单位一个新编的页面，也实现了这样的功能。这在编程上是怎么实现的？想了想，还真不是一会就能明白的。然后就开始找ajax相关资料，网上也有很多类似的实例，根据动态更新页面的原理，一步步学习、测试。
经过几天零零碎碎的学习，最后实现了这样的功能。
如下：
(1)json01.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<style type="text/css" media="screen">
body { font: 14px arial; }
.suggest_link { background-color: #FFFFFF; padding: 2px 6px 2px 6px; }
.suggest_link_over { background-color: #E8F2FE; padding: 2px 6px 2px 6px; }
#search_suggest { position: absolute; background-color: #FFFFFF; text-align: left; border: 1px solid #000000; }
</style>
<script>
$(document).ready(function(){
var focusIndex;
var lastIndex;
document.getElementById("getValue").onkeyup=function(event){
evt = window.event || evt;
if(evt.keyCode>=65&&evt.keyCode<=90 || evt.keyCode == 8||evt. keyCode == 46){
//$('#content').html("other key");
var tValue=0;
setInterval(function(event){
var s='';
if(tValue !=document.getElementById("getValue").value){
tValue=document.getElementById("getValue").value;
$.getJSON("json02.jsp?id="+Math.random(), {val:tValue },function(d){
for(var i=0;i<d.length;i++){
s+="<div id="+i+" onmouseover='javascript:suggestOver(this);'";
s+="onmouseout='javascript:suggestOut(this);' ";
s+= "onclick='javascript:setSearch(this.innerHTML.substring(0,3));'";
s+=">"+d[i].id +" "+d[i].name+"</div>"; }
createMenu("getValue","content");
$('#content').html(s);
});
}
},100);
}else if(evt.keyCode==38){//如果为up键
if(lastIndex==null){
}else{
focusIndex=lastIndex-1;
document.getElementById(focusIndex).className='suggest_link_over';
document.getElementById(lastIndex).className='suggest_link'; l
astIndex--;
}
}else if(evt.keyCode==40){//如果为down键
if(lastIndex==null){
focusIndex=0;
document.getElementById(focusIndex).className='suggest_link_over';
lastIndex=0;
}else{
focusIndex=lastIndex+1;
document.getElementById(focusIndex).className='suggest_link_over';
document.getElementById(lastIndex).className='suggest_link';
lastIndex++;
}
}else if(evt.keyCode==13){
this.value=document.getElementById(focusIndex).innerHTML.substring(0,3);
lastIndex=null;
}
};//function
});//ready
//Mouse over function
function suggestOver(div_value) {
div_value.className = 'suggest_link_over'; }
//Mouse out function
function suggestOut(div_value) {
div_value.className = 'suggest_link'; }
//Click function function setSearch(value) {
document.getElementById('getValue').value = value;
$('#content').hide(); }
//取得 文本框所的位置（左上角）
function getPosition( obj ) {
var top = 0;
var 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 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 pink";
newControl.style.backgroundColor = "#FFFFF";
newControl.style.width = "200px"; //绝对宽度
//newControl.style.height = "200px";
newControl.style.left = left_new + "px"; //位置
newControl.style.top = top_new + textBox.clientHeight + "px"; //注意，将此高度加2是为了解决JS出现的非自然因素… return newControl;
} else{
return document.getElementById(menuid);
}
}
</script>
</head> <body> <input type="text" id="getValue" value="" />
</body>
</html>
(2)json02.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>
<% String value=(String)request.getParameter("val");
String su="[";
List data=new ArrayList();
List cell=new ArrayList();
cell.add(0, "001");
cell.add(1, "value0");
data.add(cell);
List cell1=new ArrayList();
cell1.add(0, "002");
cell1.add(1, "value1");
data.add(cell1);
int len=data.size();
for(int j=0;j<data.size()-1;j++){
List c=(List)data.get(j);
su+="{id:"+"'"+c.get(0)+"'"+",name:"+"'"+c.get(1)+"'"+"}, ";
}
List n=(List)data.get(len-1);
su+="{id:"+"'"+n.get(0)+"'"+",name:"+"'"+n.get(1)+"'"+"}] ";
out.clear();
if (value.equals("aa")){
out.write(su); }
else{
out.write(s2); }
%>
总结：
1.鼠标动作，将onmouseover等动作函数直接写在内容块中的条目<div>中即可。
2.键盘动作的触发点是getValue文本框，当输入值时，就触发onkeyup动作。再判断键值是多少，转向不同的操作。
3.向上向下键取条目时，只能选第一个，再按键就没有反应了。原因，<div>的id值lastIndex,focusIndex的放置位置不对，应该放在onkeyup函数之前，而不应该放在该函数里面。
