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>
相关文章推荐
- 仿百度搜索智能提示(纯JS实现)
- 仿百度搜索智能提示(纯JS实现) (转)
- .NET中使用js实现百度搜索下拉提示效果[不是局部刷新,呜呜。。]
- .NET中使用js实现百度搜索下拉提示效果[不是局部刷新,呜呜。。]
- 统计站内热搜词 实现百度搜索的时候的提示功能
- js/jQuery实现类似百度搜索功能
- 在Winfrom下实现类似百度、Google搜索自能提示功能
- 实现输入内容提示的功能(仿google_百度输入框提示)jquery.ui.autocomplete.js插件
- 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码】
- 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】
- JS仿百度搜索自动提示框匹配查询功能
- 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】
- 实现类似百度搜索框中模糊提示功能
- 利用jsonp跨域调用百度js实现搜索框智能提示
- js实现百度搜索接口及链接功能
- 基于jQueryUI和Corethink实现百度的搜索提示功能
- 在Winfrom下实现类似百度、Google搜索自能提示功能
- C# 实现百度搜索框智能提示功能
- Winform实现百度搜索框智能提示功能( C# )
- 使用jsonp跨域调用百度js实现搜索框智能提示(转)