這次我們來(lái)一步一步的仿造一個(gè)google的搜索欄,由于本人學(xué)的也很淺相信大家不會(huì)看得很迷糊,由于我們沒(méi)有鏈接數(shù)據(jù)庫(kù),我采用一個(gè)硬編碼來(lái)編寫被匹配的內(nèi)容,正常情況下應(yīng)該是從數(shù)據(jù)庫(kù)中取出一個(gè)表的”被搜索最多次數(shù)”的10個(gè)內(nèi)容然后進(jìn)行匹配
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;
????}
}
這個(gè)工廠生成了一個(gè)list,里面存儲(chǔ)了需要匹配的內(nèi)容
有了匹配信息我們還需要一個(gè)servlet來(lái)對(duì)它進(jìn)行匹配
新建一個(gè)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?{
????????//轉(zhuǎn)發(fā)至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?{
????????//用于緩存匹配對(duì)象的字符串,正常應(yīng)該是個(gè)數(shù)組
????????String?temps="";
????????response.setContentType("text/html");
????????PrintWriter?out?=?response.getWriter();
????????//從工廠類中取出要匹配的list
????????List?list?=?ListFactory.getList();
????????//ajax發(fā)送過(guò)來(lái)的請(qǐng)求值,也就是頁(yè)面上現(xiàn)在輸入的內(nèi)容
????????String?inputtext?=?request.getParameter("inputtext");
????????//遍歷list
????????for(int?i=0;i<list.size();i++){
????????????String?temp?=?(String)?list.get(i);
????????????//如果在匹配內(nèi)容頭中找到當(dāng)前輸入的字符串,且輸入不是空串
//indexOf?返回字串的位置,為0?則表示?123中找到了12?,而找不到23因?yàn)?3的indexOf
//為1
????????????if(temp.indexOf(inputtext)==0?&&?inputtext!=null?&&?inputtext.trim().length()!=0){
????????????????//將匹配上的list內(nèi)容添加到緩存字符串
????????????????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
????}
}
有了工廠類(替代數(shù)據(jù)庫(kù)),有了控制器,現(xiàn)在開(kāi)始寫前臺(tái)的頁(yè)面和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>
這個(gè)頁(yè)面中唯一需要注意的是?作為輸出匹配框的?div?層
<div?id="outdiv"?style="?display:none;?width:119px;?height:20;?position:absolute;?left:?16px;?top:?41px;?background-color:#ECEDFF">111</div>
此層一開(kāi)始被設(shè)置為隱藏,111可以不寫,其實(shí)寫什么都看不到,因?yàn)樗緵](méi)有被顯示
Display:none?類似的屬性還有?visible,它們的區(qū)別在此不說(shuō)了,百度一下,你就知道?
文本框設(shè)置一個(gè)鍵盤事件
onKeyUp="getXML()"
每次鍵盤抬起就調(diào)用一次函數(shù)
在開(kāi)始寫腳本文件之前需要先導(dǎo)入prototype庫(kù),在我的ajax入門3?里有提及
正常導(dǎo)入它以后我們就開(kāi)始?編寫?test.js?文件
//鍵盤抬起時(shí)激活的函數(shù)
function?getXML(){
????//局部請(qǐng)求地址
????var?url="searchAction";
????//獲取用戶當(dāng)前輸入的內(nèi)容
????var?inputvalue=$("itext").value;
????//使用prototype函數(shù)構(gòu)造xmlhttprequest對(duì)象
????var?myAjax?=?new?Ajax.Request(
????url,
????{
????????//請(qǐng)求方法為post
????????method:'post',
????????//設(shè)置參數(shù)為?inputtext=inputvalue
????????parameters:"inputtext="+inputvalue,
????????//設(shè)置回調(diào)函數(shù)
????????onComplete:showResponse,
????????//是否異步
????????asynchronous:true
????}
????);
}
function?showResponse(xmlrequest){
//還是需要注意回調(diào)函數(shù)的參數(shù),使用此參數(shù)的responseText屬性獲取服務(wù)器//servlet返回的文本內(nèi)容,要取得XML請(qǐng)參考我之前的?ajax?入門文章
????var?text?=?xmlrequest.responseText;
????//如果返回的被匹配上的內(nèi)容不為空
????if(text!=""){
????????//顯示該層,關(guān)于element.show也是prototype的函數(shù)
????????Element.show("outdiv");
????}else{
//如果沒(méi)匹配上就隱藏該層,注意我們的思路是每次鍵盤抬起都進(jìn)行一次請(qǐng)求,
//然后進(jìn)行判斷,不匹配就隱藏
????????Element.hide("outdiv");
????}
????//將匹配的內(nèi)容輸出到?div?層
????$("outdiv").innerHTML=xmlrequest.responseText;
}
以下內(nèi)容為更新:
這里我們可以再稍微豐富一下比如將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();
????}
也就是使用"$"字符來(lái)將返回的幾個(gè)匹配分割
然后在javascript中對(duì)其進(jìn)行解析
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");
}
這樣每次出現(xiàn)下拉列表之后列表中的項(xiàng)目都可以被選擇,點(diǎn)擊之后內(nèi)容就會(huì)錄入到搜索框中了?