ajax+js 实现 google suggest

112 阅读 0 评论 74 点赞

我是靠谱客的博主彩色金鱼，最近开发中收集的这篇文章主要介绍ajax+js 实现 google suggest，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
    <title>酒店信息搜索</title>
    <script type="text/javascript" src="<%=request.getContextPath()%>/dqbb/JS"></script>
    <script type="text/javascript">
    var language="";
    var num=-1;
  var mm=0;
    function go(){
   (new DqbbFactory()).dqbbCall("ajax.check",[document.getElementById('content').value,'<%=request.getHeader("Accept-Language")%>'],function(reply){
    var url=reply.getResult();
    var urlarr=url.split(",");
    var num=(urlarr.length)/3;
    var obj3=document.getElementById('url');
    if(url==""){
     obj3.innerHTML="没有搜索到信息!";
     obj3.style.display='';
    }else if(num==1){
     window.location.href=urlarr[2];
    }else {
     var buffer="<table border=/"0/">";
     for(var i=1;i<=num;i++){
      buffer+="<tr><td><a href=/""+urlarr[i*3-1]+"/">"+urlarr[i*3-2]+"</a></td></tr>"
     }
     buffer +="</table>";
     obj3.innerHTML=buffer;
     obj3.style.display='';
    }
   });
  }
  function del(){
   if(mm==0){
    obj=document.getElementById("content");
    obj.value="";
    mm=1;
   }
  }
  function $(obj){
   if(typeof(obj)=='object')
    return obj;
   else
    return document.getElementById(obj);
  }
  function $v(obj){
   return $(obj).value;
  }
  function down(){
   if(event.keyCode==13){
    if(num==-1){
     go();
    }else{
     var rs=document.getElementsByName('result');
     $('content').value=rs[num].innerHTML;
     rs[num].style.background='';
     distory(document.getElementById('url'));
     document.getElementById('content').focus();
     num=-1;
    }
   }if(event.keyCode==38){
    var rs=document.getElementsByName('result');
    if(num!=-1){
     rs[num].style.background='';
    }
    if(num==-1||num==0){
     num=rs.length-1;
    }else{
     num--;
    }
    if(num!=-1){
     rs[num].style.background='gray';
    }
   } if(event.keyCode==40){
    var rs=document.getElementsByName('result');
    if(num!=rs.length&&num!=-1){
     rs[num].style.background='';
    }
    if(num==rs.length-1){
     num=0;
    }else{
     num++;
    }
    if(num!=-1){
     rs[num].style.background='gray';
    }
   }
  }
  function lose()
  {
   if(num!=-1){var rs=document.getElementsByName('result');
    $('content').value=rs[num].innerHTML;
   }
      distory(document.getElementById('url'));
  }
  String.prototype.trim=function(){
   return this.replace(/(^/s*)|(/s*$)/g,"");
  }
  function show(elt)
  {
      if (elt) elt.style.display = '';
  }
  function distory(elt)
  {
      if (elt) elt.style.display = 'none';
  }
  function search(){
     if(event.keyCode!=13&&event.keyCode!=38&&event.keyCode!=40){
    var content = $v('content');
    if(content!=null&&content.trim()!=""){
    (new DqbbFactory()).dqbbCall("ajax.suggest",[content],function(reply){
     var content=reply.getResult();
     if(content!=""){
      var div="";
      var arr=content.split(",");
      for(var i=0;i<arr.length;i++){
       div+="<div id=/"result/" name=/"result/" onMouseMove=/"javascript:this.style.background='gray';num="+i+"/" onMouseOut=/"javascript:this.style.background='';num=-1/" οnclick=/"javascript:document.getElementById('content').value=this.innerHTML;distory(document.getElementById('url'));/">"+arr[i]+"</div>";
      }
      document.getElementById('url').innerHTML=div;
      document.getElementById('url').style.display='';
     }else{
      document.getElementById('url').style.display='none';
     }
    })
    }
   }
  }
    </script>
</head>
<body>
<div style="position:absolute;left:43%;top:30%;" ><font style="font-size:40">酒店预订网</font></div>
<div id="beijing" style="position:absolute;left:33%;top:50%;" ><input type="text" id="content" name="content" style="color:gray" value="北京" οnclick="javascript:del()"   οnblur="javascript:lose()" onkeyDown="javascript:down()" onkeyUp="javascript:search()" size="60" ></input><input type="button" value="搜索" οnclick="javascript:go()" " /></input></div>
<div id="xxx" style="position:absolute;left:33%;top:54%;" ></div>
<div id="url" style="position:absolute;left:33%;top:54%;width:433px;border-color:gray;border-style:solid;border-left:1px solid;border-right:1px solid;border-bottom:1px solid;border-top:1px solid;display:none;" ></div>
</body>
</html>