仿百度智能搜索提示的实现


 在百度搜索中,我们在输入框中键入关键字,搜索引擎会自动在输入框的下方,以列表的形式将匹配的关键词展现出来,供用户选择,这样的实现大大提高了用户的体验,本文就带领大家一步步去实现这样的效果。

先看一下完成后的效果:


仿百度智能搜索提示的实现
 

 

一、首先创建一个JSP页面,内部包含一个查询输入框,并在输入框的正下方创建一个<div>,用于智能提示信息列表的展现。

<tr>

       <td nowrap="nowrap">关键字</td>

       <td><input type="text" id="title" name="title" value="" size="55" onkeyup="sendRequest()" onclick="hiddenSuggest()" >  </td>

</tr>

<tr><td></td>

<td><div id="suggest" style="display:none;width:100%" ></div>

</td>

</tr>

title文本查询输入框上注册onkeyuponclick事件,当键盘的按键按下时,执行sendRequest()函数,该函数主要负责向服务器端发送请求,并将服务器端返回的数据在文本框下方的div中展现。当在文本框中执行鼠标单击时,则执行hiddenSuggest()函数,使div隐藏。

二、创建js文件,并将js文件引入到第一步创建的JSP文件中。

   

//发送ajax请求,并将服务器端返回的数据在suggest DIV中展现。

    function sendRequest() {

       clearSuggest();//清除智能提示列表suggest DIV中的所有元素

       //取得查询输入框中的数据

var info = trim(document.getElementById('title').value);

       //校验查询输入框中的数据是否为空,如果为空,则不再往服务器端发送请求。

if(info==""){

            hiddenSuggest();

           return;

       }

//获取XMLHttpRequest对象,用于和服务器端交互。

       var req = getXmlHttpObject();

//请求的url,将查询文本框中的数据发送到服务器端执行查询。

       var url = "knowdo.do?method=suggest&info="+info;

       req.onreadystatechange = function() {

           if (req.readyState == 4) {

              if (req.status == 200) {

//解析服务器端返回的XML格式的数据,并将解析出来的数据放到智能提示DIV中。

                  var tips = req.responseXML.getElementsByTagName("res");

                  if(tips.length!=0){

                     for(var i=0;i<tips.length;i++){

//解析每一个node节点中的value值,并将该value放到一个新的DIV中,并为该DIV设置一些事件:当鼠标滑过该DIV时,该DIV在高亮显示;当鼠标点击该DIV时,则将该DIV中的value值设置到查询文本框title中。

                         var title=tips[i].firstChild.nodeValue;

                         var sDiv = "<div class='out' onmouseover='mover(this);' onmouseout='mout(this);' onclick='setSuggest(this)'>"+title+"</div>";

//将服务器端所有的返回值value,及相匹配的DIV,全部放到智能提示列表DIV中。    

       document.getElementById('suggest').innerHTML+=sDiv;

                         }

                         displaySuggest();//设置智能提示列表可见

                     }else{

                          hiddenSuggest();//设置智能提示列表不可见

                     }

              }

           }

       };

       req.open("POST", url, true);

       req.send(null);

    }

//点击某个value值时,将该value值设置到查询文本框中。

    function setSuggest(para){

    document.getElementById('title').value=para.firstChild.nodeValue;

       hiddenSuggest();

    }

 

//设置智能提示列表不可见

function hiddenSuggest(){

       document.getElementById('suggest').style.display="none";        }

//清除suggest DIV中的所有元素

    function clearSuggest(){

       document.getElementById('suggest').innerHTML="";

       }

//鼠标滑过某个value值时,设置当前value值所在DIV高亮显示。

    function mover(para){

       para.className="over";

       }

//鼠标离开某个value值时,设置当前value值所在DIV恢复初始显示样式。

    function mout(para){

       para.className="out";

       }

    //设置智能提示列表可见

    function displaySuggest(){

       document.getElementById('suggest').style.display="block";

       }

    //获取XMLHttpRequest对象,用于和服务器端交互。

    function getXmlHttpObject() {

       var xmlHttp = null;

       try {

           // Firefox, Opera 8.0+, Safari

           xmlHttp = new XMLHttpRequest();

       } catch (e) {

           // Internet Explorer

           try {

              xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

           } catch (e) {

              xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

           }

       }

       return xmlHttp;

    }

三、交互层Java代码,详细信息参加代码注释。

   

//接收客户端传递过来的数据,然后调用Dao层执行数据库查询操作,

//并将查询结果以XML格式的数据样式返回给客户端。

    private String suggest(HttpServletRequest request,HttpServletResponse response) {

       //接收客户端传递过来的数据

       String title = request.getParameter("info");

       //为确保数据的及时刷新,此处进行清除浏览器缓存操作

response.setContentType("text/xml");

       response.setHeader("Cache-Control", "no-store");

       response.setHeader("Pragma","no-cache");

       response.setDateHeader("Expires",0);

   

       try {

           PrintWriter out = response.getWriter();

           out.write("<?xml version=\"1.0\" encoding=\"GBK\"?>");

           out.write("<response>");

          

            //调用Dao层接口,执行数据库查询操作。

           List<String> list =  knowDao.suggest(title);

           //将查询出的所有匹配的记录,以标准的XML文件的格式发送到客户端。

           for(int i=0;i<list.size();i++){   

              out.write("<res>");

              out.write(list.get(i));

              out.write("</res>");

           }     

           out.write("</response>");      

           out.flush();

           out.close();

       } catch (IOException e) {

           log.error("出错了-"+e);

       }

       return null;

    }

 

四、DaoJava代码,详细信息参加代码注释。

 

//按照指定条件,执行数据库查询操作,并将查询结果以List列表的形式返回。

public List<String> suggest(String title) {

           Connection conn=pool.getConnection();

           List<String> list = new ArrayList<String>(); 

           StringBuffer sql = new StringBuffer();

//组装查询SQL语句,按照关键字进行模糊查询,并最多返回前十条记录。

           sql.append("select top 10 blob_name from t_know where 1=1 ");

              if(!"".equals(title)&&title!=null){      

              sql.append(" and title like '%");

              sql.append(title);

              sql.append("%'");

           }

//按照指定字段进行排序

           sql.append(" order by last_update_time desc");

           try {

              ps = conn.prepareStatement(sql.toString());

              rs = ps.executeQuery(); 

//将查询结果集中的数据放入List中。     

              while(rs.next()){                 

                  list.add(rs.getString("blob_name"));  

              }

           }catch (Exception e) {

              log.error(Tool.getStackTrace(e));

              log.error(sql);

           }finally{

              Tool.closeConnection(rs, ps, conn); //关闭连接

           }     

           return list; //返回查询结果。

       }

 

到此,一个仿百度智能搜索提示的开发就算完成了,实际效果就是开篇的看到的。

你可能感兴趣的:(百度)