Js和Json技术实现百度搜索提示功能
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
contentType="text/html; charset=UTF-8"
%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>获取后台提交来json对象，搜索提示</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
#text{
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
height: 200px;
width: 190px;
border: 2px solid red;
position: relative;
}
#suggest{
position: absolute;
left: 10px;
}
#suggest,#suggest div{
border:1px solid red;
height: 35px;
width: 160px;
z-index: 10000;
}
.show{
display: block;
}
.on{
display:none;
}
.col{
background-color: blue;
}
</style>
</head>
<body>
<div id="text">
<div>
<!-- 搜索框 -->
<input type="text" name="name" id="name" onkeyup="soso(this.value,event)" />百度<br>
</div>
<!-- 表单提示框 ，默认隐藏 -->
<div id="suggest" class="on" >
</div>
</div>
<hr/>
<div id="luo"></div><br>
<div id="fei"></div>
</body>
</html>
<script type="text/javascript">
//把字符串解析成dom文档
function parseXML(StringXML){
var dom;
try {
try {
//ie浏览器
dom=new ActiveXObject("Microsoft.XMLDOM");
//开始解析
dom.loadXML(StringXML);
} catch (e) {
//ie浏览器的其他版本
dom=new ActiveXObject("Msxml9.DOMDocument");
dom.loadXML(StringXML);
}
} catch (e) {
//非ie浏览器
var newParse=new DOMParser();
//开始解析
dom=newParse.parseFromString(StringXML,"text/xml");
}
return dom;
}
//侦听单击清除事件，清除提示div
document.onclick=function(evt){
//ie有docuement.all属性
var isExists=(document.all)? true : false;
//获取按键的值
var key;
//触发事件对象
var obj;
if(isExists){
key=event.keyCode;
obj=event.srcElement;
}else{
key=evt.which;
obj=evt.target;
}
//alert('key=='+key);
//alert('obj'+obj);
//获取提示框所有子节点
var arrays= document.getElementById("suggest").childNodes;
//获取输入提示框
var name=document.getElementById("name");
//遍历所有节点
for(var i=0;i<arrays.length;i++){
//当单机不是此节点，就隐藏
if(obj!=arrays[i]&&obj!=name){
document.getElementById("suggest").style.display="none";
document.getElementById("suggest").innerHTML="";
// document.getElementById("suggest").className="on";
//arrays[i].className="on";
}
}
}
//去空串
String.prototype.trim=function (){
return this.replace(/^\s+|\s+$/g, "");
}
//键盘onkeyup事件，发生异步调用
function soso(obj,evt){
//设置参数
var url="${pageContext.request.contextPath }/SosoServlet.action";
var data="name="+obj+"&item="+new Date();
var XMLHttpRequest=createXMLHttpRequest();
//判断输入框的值
if(obj.length>=1){
//侦听按键
var flag= (document.all) ? true : false;
var key2;
if(flag){
key2=event.keyCode;
}else{
key2=evt.which;
}
// alert(key2);
//判断这个onkeyup事件不是选提示的onkeyup
//避免onkeyup事件冲突 if(key2!=40&&key2!=39&&key2!=38&&key2!=37&&key2!=13){
//注册回调函数
XMLHttpRequest.onreadystatechange=function(){
if(XMLHttpRequest.readyState==4){
if(XMLHttpRequest.status==200){
var result = XMLHttpRequest.responseText;
// alert(result);
var jsonObj;
if(document.all){
//ie
jsonObj=eval('('+result+')');
}else{
//非ie
jsonObj=JSON.parse(result);
}
if(jsonObj.length>=1){
var str='';
//显示
document.getElementById("suggest").style.display="block";
document.getElementById("suggest").innerHTML='';
//循环json对象
for(var i=0;i<jsonObj.length;i++){
// alert(jsonObj[i].name);
str=str+"<div>"+jsonObj[i].name+"</div>";
}
document.getElementById("suggest").innerHTML=str;
//获取提示框 div下面的所有的子节点
var arrays=document.getElementById("suggest").childNodes;
index=-1;
//循环所有字节，给每个节点绑定单击事件
for(var i=0;i<arrays.length;i++){
//给每个div一个单击事件
arrays[i].onclick=function (){
// alert(this.innerHTML);
document.getElementById("name").value=this.innerHTML;
document.getElementById("suggest").style.display="none";
document.getElementById("suggest").innerHTML="";
index=-1;
}
//给鼠标进入事件
arrays[i].onmouseover=function(){
// alert('xxx'); background-color
this.style.backgroundColor="red";
var array=document.getElementById("suggest").childNodes;
for(var j=0;j<array.length;j++){
if(this!=array[j]){
array[j].style.backgroundColor="white";
}else{
index=j;
}
}
}
//当鼠标离开的时候
arrays[i].onmouseout=function (){
this.style.backgroundColor="white";
}
}
} else{
//当后台返回的值小于1时
document.getElementById("suggest").style.display="none";
document.getElementById("suggest").innerHTML="";
index=-1;
}
}
}
}
XMLHttpRequest.open("post",url,true);
XMLHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
XMLHttpRequest.send(data);
}//判断onkeyup事件
}//判断obj的长度
}
//异步调用,创建xmlhttprequest
function createXMLHttpRequest(){
var XMLHttpR;
try {
if(window.XMLHttpRequest){
//非ie浏览器
XMLHttpR=new XMLHttpRequest();
XMLHttpR.overrideMimeType("text/html;charset=UTF-8");
}
} catch (e) {
//ie浏览器
if(window.ActiveXObject){
//针对ie浏览器不同版本
try{
XMLHttpR=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
try {
XMLHttpR=new ActiveXOject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpR=new ActiveXObject("Msxml3.XMLHTTP");
} catch (e) {
// TODO: handle exception
}
}
}
}
}
return XMLHttpR;
}
var num=-1;//默认提示div数组的下标
//侦听键盘按键事件
document.onkeyup=function(evt){
//key键
var key;
var isExists=(document.all)? true: false;
//监听对象
var obj;
if(isExists){
//ie
key=event.keyCode;
obj=event.srcElement;
}else{
//非ie
key=evt.which;
obj=evt.target;
}
//alert(key);//下40 上38 左37 右39 回车13
switch (key) {
case 40:
num++;
var array1=document.getElementById("suggest").childNodes;
//alert(index);
//alert();
if(num>=array1.length){
num=0;
}
var obj1=document.getElementById("suggest").childNodes[num];
obj1.style.backgroundColor="red";
//获取所有子节点
for(var i=0;i<array1.length;i++){
if(obj1!=array1[i]){
array1[i].style.backgroundColor="white";
}
}
document.getElementById("fei").innerHTML=num;
break;
case 38:
num--;
var array1=document.getElementById("suggest").childNodes;
if(num<0){
num=array1.length-1;
}
var obj2=document.getElementById("suggest").childNodes[num];
obj2.style.backgroundColor="red";
for(var i=0;i<array1.length;i++){
if(obj2!=array1[i]){
array1[i].style.backgroundColor="white";
}
}
document.getElementById("fei").innerHTML=num;
break;
case 13:
//回车以后给文本框赋值
document.getElementById("name").value=
document.getElementById("suggest").childNodes[num].innerHTML;
document.getElementById("suggest").style.display="none";
document.getElementById("suggest").innerHTML="";
num=-1;
break;
default:
break;
}
}
</script>
2515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
