這次我們來一步一步的仿造一個google的搜索欄,由于本人學的也很淺相信大家不會看得很迷糊,由于我們沒有鏈接數據庫,我采用一個硬編碼來編寫被匹配的內容,正常情況下應該是從數據庫中取出一個表的”被搜索最多次數”的10個內容然后進行匹配
import?java.util.ArrayList;
import?java.util.List;
public?class?ListFactory?{
????public?static?List?getList(){
????????List?list?=?new?ArrayList();
????????list.add("ibm");
????????list.add("hp");
????????list.add("dell");
????????list.add("desk");
????????return?list;
????}
}
這個工廠生成了一個list,里面存儲了需要匹配的內容
有了匹配信息我們還需要一個servlet來對它進行匹配
新建一個servlet
映射地址?searchAction
import?java.io.IOException;
import?java.io.PrintWriter;
import?java.util.List;
import?javax.servlet.ServletException;
import?javax.servlet.http.HttpServlet;
import?javax.servlet.http.HttpServletRequest;
import?javax.servlet.http.HttpServletResponse;
public?class?SearchAction?extends?HttpServlet?{
????/**
?????*?Constructor?of?the?object.
?????*/
????public?SearchAction()?{
????????super();
????}
????/**
?????*?Destruction?of?the?servlet.?<br>
?????*/
????public?void?destroy()?{
????????super.destroy();?//?Just?puts?"destroy"?string?in?log
????????//?Put?your?code?here
????}
????/**
?????*?The?doGet?method?of?the?servlet.?<br>
?????*
?????*?This?method?is?called?when?a?form?has?its?tag?value?method?equals?to?get.
?????*?
?????*?@param?request?the?request?send?by?the?client?to?the?server
?????*?@param?response?the?response?send?by?the?server?to?the?client
?????*?@throws?ServletException?if?an?error?occurred
?????*?@throws?IOException?if?an?error?occurred
?????*/
????public?void?doGet(HttpServletRequest?request,?HttpServletResponse?response)
????????????throws?ServletException,?IOException?{
????????//轉發至doPost();
????????doPost(request,response);
????}
????/**
?????*?The?doPost?method?of?the?servlet.?<br>
?????*
?????*?This?method?is?called?when?a?form?has?its?tag?value?method?equals?to?post.
?????*?
?????*?@param?request?the?request?send?by?the?client?to?the?server
?????*?@param?response?the?response?send?by?the?server?to?the?client
?????*?@throws?ServletException?if?an?error?occurred
?????*?@throws?IOException?if?an?error?occurred
?????*/
????public?void?doPost(HttpServletRequest?request,?HttpServletResponse?response)
????????????throws?ServletException,?IOException?{
????????//用于緩存匹配對象的字符串,正常應該是個數組
????????String?temps="";
????????response.setContentType("text/html");
????????PrintWriter?out?=?response.getWriter();
????????//從工廠類中取出要匹配的list
????????List?list?=?ListFactory.getList();
????????//ajax發送過來的請求值,也就是頁面上現在輸入的內容
????????String?inputtext?=?request.getParameter("inputtext");
????????//遍歷list
????????for(int?i=0;i<list.size();i++){
????????????String?temp?=?(String)?list.get(i);
????????????//如果在匹配內容頭中找到當前輸入的字符串,且輸入不是空串
//indexOf?返回字串的位置,為0?則表示?123中找到了12?,而找不到23因為23的indexOf
//為1
????????????if(temp.indexOf(inputtext)==0?&&?inputtext!=null?&&?inputtext.trim().length()!=0){
????????????????//將匹配上的list內容添加到緩存字符串
????????????????temps=temps+temp+"<br>";
????????????}
????????}
????????//輸出緩存字符串
????????out.write(temps);
????????out.flush();
????????out.close();
????}
????/**
?????*?Initialization?of?the?servlet.?<br>
?????*
?????*?@throws?ServletException?if?an?error?occure
?????*/
????public?void?init()?throws?ServletException?{
????????//?Put?your?code?here
????}
}
有了工廠類(替代數據庫),有了控制器,現在開始寫前臺的頁面和ajax
<%@?page?language="java"?import="java.util.*"?pageEncoding="utf-8"%>
<%
String?path?=?request.getContextPath();
String?basePath?=?request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">
<html>
??<head>
????<base?href="<%=basePath%>">
????
????<title>My?JSP?'index.jsp'?starting?page</title>
????<meta?http-equiv="pragma"?content="no-cache">
????<meta?http-equiv="cache-control"?content="no-cache">
????<meta?http-equiv="expires"?content="0">????
????<meta?http-equiv="keywords"?content="keyword1,keyword2,keyword3">
????<meta?http-equiv="description"?content="This?is?my?page">
????<!--
????<link?rel="stylesheet"?type="text/css"?href="styles.css">
????-->
??</head>
??<script?src="js/prototype.js"></script>
??<script?src="js/test.js"?></script>
??<body>
??<table?width="100%"?border="1"?bordercolor="#000000">
????<tr>
??????<td>
????????<input?name="text"?type="text"?id="itext"?onKeyUp="getXML()"/>
????????<input?name="button"?type="button"??value="搜索"/>
????????<div?id="outdiv"?style="?display:none;?width:119px;?height:20;?position:absolute;?left:?16px;?top:?41px;?background-color:#ECEDFF">111</div>
??????</td>
????</tr>
????<tr>
??????<td>?</td>
????</tr>
??</table>
??</body>
</html>
這個頁面中唯一需要注意的是?作為輸出匹配框的?div?層
<div?id="outdiv"?style="?display:none;?width:119px;?height:20;?position:absolute;?left:?16px;?top:?41px;?background-color:#ECEDFF">111</div>
此層一開始被設置為隱藏,111可以不寫,其實寫什么都看不到,因為它根本沒有被顯示
Display:none?類似的屬性還有?visible,它們的區別在此不說了,百度一下,你就知道?
文本框設置一個鍵盤事件
onKeyUp="getXML()"
每次鍵盤抬起就調用一次函數
在開始寫腳本文件之前需要先導入prototype庫,在我的ajax入門3?里有提及
正常導入它以后我們就開始?編寫?test.js?文件
//鍵盤抬起時激活的函數
function?getXML(){
????//局部請求地址
????var?url="searchAction";
????//獲取用戶當前輸入的內容
????var?inputvalue=$("itext").value;
????//使用prototype函數構造xmlhttprequest對象
????var?myAjax?=?new?Ajax.Request(
????url,
????{
????????//請求方法為post
????????method:'post',
????????//設置參數為?inputtext=inputvalue
????????parameters:"inputtext="+inputvalue,
????????//設置回調函數
????????onComplete:showResponse,
????????//是否異步
????????asynchronous:true
????}
????);
}
function?showResponse(xmlrequest){
//還是需要注意回調函數的參數,使用此參數的responseText屬性獲取服務器//servlet返回的文本內容,要取得XML請參考我之前的?ajax?入門文章
????var?text?=?xmlrequest.responseText;
????//如果返回的被匹配上的內容不為空
????if(text!=""){
????????//顯示該層,關于element.show也是prototype的函數
????????Element.show("outdiv");
????}else{
//如果沒匹配上就隱藏該層,注意我們的思路是每次鍵盤抬起都進行一次請求,
//然后進行判斷,不匹配就隱藏
????????Element.hide("outdiv");
????}
????//將匹配的內容輸出到?div?層
????$("outdiv").innerHTML=xmlrequest.responseText;
}
以下內容為更新:
這里我們可以再稍微豐富一下比如將servlet的doPost改寫成
????public?void?doPost(HttpServletRequest?request,?HttpServletResponse?response)
????????????throws?ServletException,?IOException?{
????????String?temps="";
????????response.setContentType("text/html");
????????PrintWriter?out?=?response.getWriter();
????????List?list?=?ListFactory.getList();
????????String?inputtext?=?request.getParameter("inputtext");
????????for(int?i=0;i<list.size();i++){
????????????String?temp?=?(String)?list.get(i);
????????????if(temp.indexOf(inputtext)==0?&&?inputtext!=null?&&?inputtext.trim().length()!=0){
????????????????temps=temps+temp+"$";
????????????}
????????}
????????out.write(temps);
????????out.flush();
????????out.close();
????}
也就是使用"$"字符來將返回的幾個匹配分割
然后在javascript中對其進行解析
function?showResponse(xmlrequest){
????var?text?=?xmlrequest.responseText;
????var?texts?=?text.split("$");
????if(text!=""){
????????Element.show("outdiv");
????}else{
????????Element.hide("outdiv");
????}
????var?temp?=?"";
????var?outdiv?=?$("outdiv");
????for(var?i?=?0;i?<?texts.length-1;i++){
????????temp?=?temp?+?"<span?style=cursor:hand?onclick='inMessage(this)'>"?+texts[i]+?"</span>"?+"<br>";
????}
????outdiv.innerHTML?=?temp;
}
function?inMessage(obj){
????//alert(obj.innerHTML);
????$(itext).value?=?obj.innerHTML;
????Element.hide("outdiv");
}
這樣每次出現下拉列表之后列表中的項目都可以被選擇,點擊之后內容就會錄入到搜索框中了?