空间管理您的位置: 51Testing软件测试网 » fly的个人空间 » 日志

搜索提示

上一篇 / 下一篇 2013-03-22 14:43:37 / 个人分类：其它

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!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">
<head>
<meta. http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<style. type="text/css"> 
body{ 
font-size:0.75em; 
border:0; 
margin:250px 0 0 0; 
padding:0; 
} 
#content{ 
width:450px; 
margin:auto;} 
 
#key{ 
width:300px; 
margin:0; 
padding:4px 0 0 5px; 
} 
 
.key_abnormal{ 
border-bottom:1px solid white; 
border-left:1px solid #8298BF; 
border-top:1px solid #8298BF; 
border-right:1px solid #8298BF; 
} 
.key_normal{ 
border-bottom:1px solid #8298BF; 
border-left:1px solid #8298BF; 
border-top:1px solid #8298BF; 
border-right:1px solid #8298BF; 
} 
 
#search_suggest{ 
margin:0; 
padding:0; 
width:300px; 
height:auto; 
border:1px solid black; 
} 
 
.suggest_hidden{ 
display:none; 
} 
.item_normal{ 
width:100%; 
overflow:hidden; 
padding-left:5px; 
padding-top:2px;} 
 
.item_high{ 
padding-left:5px; 
padding-top:2px; 
background-color:#326BC5; 
color:white;} 
 
</style> 
<script. type="text/javascript"> 
var array; 
var xhttp; 
var zz=-1; //此为指针 
var textValue="";//定义一个全局变量，用于存放输入文本框中的内容，也可以放到一个隐藏的文本框中 
 
//生成搜索提示框（或者称之为生成下拉列表） 
function buildList(){ 
document.getElementById("search_suggest").innerHTML="";//将空字符串赋值到搜索提示框中 
for(var i=0;i<array.length;i++){ 
if(array!=""){ 
document.getElementById("search_suggest").innerHTML+="<div id='item" + i + "' class='item_normal' nmouseover='beMouseOver(" + i + ")' nclick='beClick(" + i + ")'>" + array[i] + "</div>"; 
//alert("子节点长度："+document.getElementById("search_suggest").childNodes.length); 
} 
}//for循环 
}//函数 
 
 
//函数鼠标经过时的效果 
function beMouseOverEFF(i){ 
if ((i>=0)&(i<array.length)){ 
document.getElementById("item" + i).className="item_high"; 
} 
} 
 
//函数鼠标移开时的效果 
function beMouseOutEFF(i){ 
if ((i>=0)&(i<array.length)){ 
document.getElementById("item" + i).className="item_normal"; 
} 
} 
 
//函数鼠标经过 ,i表示传递的行号，0表示第一行 
function beMouseOver(i){ 
document.getElementById("key").focus(); 
beMouseOutEFF(zz); //鼠标移到该行的时候，先把之前所在的那一行的背景色还原，因为zz是全局变量，必然保存着之前所在的行号 
zz=i; //把当前行号赋值给zz 
beMouseOverEFF(zz); //鼠标移到该行的时候，把当前行的背景色还原 
} 
 
//函数鼠标移开 
function beMouseOut(i){ 
} 
 
 
//函数单击 
function beClick(i){ 
document.getElementById("key").value=array[i]; 
document.getElementById("key").className="key_normal"; 
document.getElementById("search_suggest").className="suggest_hidden"; 
document.getElementById("key").focus(); 
} 
//将搜索提示框隐藏 
function beHidden(){ 
document.getElementById("key").className="key_normal"; 
document.getElementById("search_suggest").className="suggest_hidden"; 
} 
//上下键时将改行赋值给搜索框 
function beUpAndDown(i){ 
document.getElementById("key").value=array[i]; 
} 
 
//方向键接收函数,我们采用onkeydown方法 
function beKeyDown(){ 
//按向下键 
if (event.keyCode==40){ 
if(zz == array.length-1){ 
//最后一行的背景色还原 
beMouseOutEFF(zz); 
//将zz复位 
zz=-1; 
//将文本框中的内容复位 
document.getElementById("key").value = textValue; 
}else if(-1<zz<array.length-1){ 
beMouseOutEFF(zz++); 
beMouseOverEFF(zz); 
//将该行的值赋值给搜索框，采用移动到某行就将该行的内容赋值到搜索框中 
beUpAndDown(zz); 
}else if(zz==-1){ 
//第一行的背景色改变同时将zz赋值为0 
beMouseOverEFF(++zz); 
 
//将第一行的内容赋值到搜索框中 
beUpAndDown(zz); 
} 
} 
//按向上键 
else if (event.keyCode==38){ 
if(zz == 0){ 
//将第一行的背景色还原，同时将zz复位 
beMouseOutEFF(zz--); 
//将文本框中的内容复位 
document.getElementById("key").value = textValue; 
}else if (zz>0){ 
beMouseOutEFF(zz--); 
beMouseOverEFF(zz); 
//将该行的值赋值给搜索框，采用移动到某行就将该行的内容赋值到搜索框中 
beUpAndDown(zz); 
} else if (zz == -1){ 
//将最后一行的背景色改变 
beMouseOverEFF(array.length-1); 
//将zz赋值为array.length-1 
zz = array.length-1; 
//将最后一行的内容赋值到搜索框中 
beUpAndDown(zz); 
} 
} 
//按回车或者TAB 
//if (event.keyCode==13||event.keyCode==9){ 
//回车键的keyCode是13,TAB键的keyCode是9 
// if (zz!=-1){ 
// beClick(zz); 
// }else { 
// document.getElementById("search_button").focus(); 
// } 
//} 
//按回车 
//if (event.keyCode==13){ 
// document.getElementById("search_button").submit(); 
//} 
} 
 
 
//按键抬起时间（beKeyUp事件）。与服务器通信 
function beKeyUp(){ 
//alert(event.keycode);//测试按键的keyCode 
if(event.keyCode!=13&event.keyCode!=9&event.keyCode!=38&event.keyCode!=40){ 
//表示并不是按动上下键，将搜索框中的内容存放在textValue中 
textValue = document.getElementById("key").value; 
//将zz复位 
zz=-1; 
//如果搜索框中的内容去除了前后空格之后长度大于0,则通过ajax调用后台数据 
 
//如果用户输入的时候仅仅是按空格键，该如何处理 
if(window.ActiveXObject){ 
//IE内核 
//alert(document.getElementById("key").value.length); 
if (document.getElementById("key").value.length>0){ 
main(); 
}else{ 
document.getElementById("key").focus(); 
document.getElementById("key").className = "key_normal"; 
} 
}else if(window.XMLHttpRequest){ 
//火狐等其他内核 
//alert(document.getElementById("key").value.length); 
if (document.getElementById("key").value.trim().length>0){ 
main(); 
}else{ 
document.getElementById("key").className = "key_normal"; 
document.getElementById("key").focus(); 
} 
} 
} 
} 
 
 
//ajax与服务器通迅 
function main(){ 
try{ 
xhttp=new XMLHttpRequest(); 
}catch(e){ 
xhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
xhttp.onreadystatechange=dowork; 
xhttp.open("POST", "Search", true); 
//设置要发送的数据的格式. 
xhttp.setRequestHeader("Content-Type","text/html;encoding=UTF-8"); 
//发送数据. 
var str = escape(document.getElementById('key').value); 
xhttp.send("str="+str+"&o=search"); 
} 
 

 function dowork() { 
array = new Array();//创建数组 
if (xhttp.readyState == 4) { 
if (xhttp.status == 200) { 
str1 = xhttp.responseText.split("|");//xhttp.responseText值是1|2|3|4|5|，而str1的值是1,2,3,4,5， 
if (str1 != null && str1 != "") { 
//第一个for的目的是将array中内容置空，放置返回的信息长度比前一次返回的短，造成了部分信息不匹配，同时也有助于 
for (i = 0; i < array.length; i++) { 
array = ""; 
} 
//根据str1的长度，将str1中的内容放到array中 
for (i = 0; i < str1.length; i++) { 
array = str1; 
} 
//如果array为空，不做操作处理；如果不为空，则生成提示框 
if (array.length > 0) { 
buildList();//生成搜索提示框 
document.getElementById("key").className = "key_abnormal";//设置搜索框的className为非正常状态（key_abnormal） 
document.getElementById("search_suggest").className = "search_suggest";//设置搜索提示框的className为search_suggest状态（显示状态） 
} 
} else { 
document.getElementById("key").className = "key_normal";//设置搜索框的className为正常状态（key_normal） 
document.getElementById("search_suggest").className = "suggest_hidden";//设置搜索提示框的className为suggest_hidden状态（隐藏状态） 
document.getElementById("key").focus();//focus()表示使得元素得到焦点并执行由 onfocus 事件指定的代码 
} 
} 
} 
}
 function beOnBlur() {
 } 
</script> 
</head> 
 
<body nclick="beHidden()"> 
<div id="content"> 
<div id="search_input"> 
 
<input id="key" type="text" name="key" class="key_normal" nkeydown="beKeyDown();" nkeyup="beKeyUp(event.keycode);" nblur="beOnBlur();" autocomplete="off"/> 
<input type="button" name="search_button" id="search_button" value="搜索/进入" /> 
</div> 
<div id="search_suggest" class="suggest_hidden"> </div> 
</div> 
<div id="ttt"></div> 
</body> 
</html>
</body>
</html>

收藏举报

TAG:

查看全部评论

搜索提示

用户菜单

我的栏目

标题搜索

日历

我的存档

数据统计

RSS订阅