在百度搜索中，我們在輸入框中鍵入關鍵字，搜索引擎會自動在輸入框的下方，以列表的形式將匹配的關鍵詞展現出來，供用戶選擇，這樣的實現大大提高了用戶的體驗，本文就帶領大家一步步去實現這樣的效果。
先看一下完成後的效果：
一、首先創建一個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文本查詢輸入框上註冊onkeyup和onclick事件，當鍵盤的按鍵按下時，執行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' οnmοuseοver='mover(this);' οnmοuseοut='mout(this);' οnclick='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; } |
四、Dao層Java代碼，詳細信息參加代碼註釋。
|
//按照指定條件，執行數據庫查詢操作，並將查詢結果以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; //返回查詢結果。 } |
到此，一個仿百度智能搜索提示的開發就算完成了，實際效果就是開篇的看到的。