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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值