简单实现google百度搜索建议

1、文章目的：学习动态提示搜索

2、实现工具：eclipse、Dreamweaver

3、实现思路：

（1）、输入一定的字符串让系统自动提醒相关类似的信息。

（2）、事件绑定，在什么条件下发生。

（3）、即时查询数据库，动态返回信息到页面。

4、具体实现：

(1)html:

<body onload="load()">

    < input id="input" onkeyup="keyup()"/>//输入内容

  <div id="result" ></div>//提示层

  <div id="display" ></div>//展示层

   </body>

（2）js代码：

 function load(){

      $('#result').hide();//默认不显示

 }

  function keyup(){

          if($('#input').val().length>2){//输入length 大于2 的字符串开始触发提示

                 execute($('#input').val(),'like');

         }else{

               $('#result').hide();//不提示不显示

        }

 }

   function  execute(content,type){

       $.ajax({

          url:'path/...',  //访问后台数据库，并封装有效信息

          type:'post',

          data:'content='+ $('#input').val(),

          dataType:'html',//json,test,html,xml均可

          success:function(returnData){//returnData数据库返回信息

               if(type=='like'){

                    $('#result').show();//显示提示

                    $('#result').innerHTML=returnData.ResponseText;//包含有超链接及方法的html，包含多条相似信息

               }else{

                   $('#result').hide();

                   $('#display').innerHTML=returnData.ResponseText;//页面展示结果

              }

            }

    });

  }

//返回的html中onclick="search(returnOkStr)"

//点击查询结果

function search(returnOkStr){

   $('#input').val(returnOkStr);//输入框内显示完整信息

  execute(returnOkStr,'');//返回真实有效的信息，输出到页面展示

}

（3）java、css代码略：

只需要controller做好返回即可。

(4)效果展示：

输入:so

出现:soso

sodu

................

(注：最好限制一下提示的条数，否则在数据量庞大的时候很不好控制，div提示应该是浮动层！)

posted on 2011-11-23 23:00 boonya 阅读(379) 评论(0) 编辑收藏举报