您的位置:首页 > Web前端 > JavaScript

Js和Json技术实现百度搜索提示功能

2015-04-24 18:40 936 查看

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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  百度 ajax json 搜索 js