Servlet+Ajax實(shí)現(xiàn)智能搜索框智能提示功能
更新時(shí)間：2017年04月22日 15:41:52 作者：不潛規(guī)則的胖小
這篇文章主要介紹了Servlet+Ajax實(shí)現(xiàn)智能搜索框智能提示功能,需要的朋友可以參考下
利用無刷新技術(shù)智能變換搜索框的提示，同百度搜索
效果圖
其基本原理：
1.給搜索框編寫js綁定事件onkeyup(鍵盤輸入時(shí))、onfocus(當(dāng)鼠標(biāo)點(diǎn)擊搜索框外的時(shí)候清空提示)
2.首先獲得用戶輸入、之后將獲得的數(shù)據(jù)傳給服務(wù)器，服務(wù)器將數(shù)據(jù)傳給后臺(tái)，后臺(tái)獲取服務(wù)器傳來的數(shù)據(jù)進(jìn)行處理，得到關(guān)聯(lián)數(shù)據(jù)，向前端返回json格式，前端通過回調(diào)函數(shù)，將返回來的json解析成文本，將文本傳輸?shù)剿阉骺蛳路降恼故敬?/p>
如下為支持json的jar包
search.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ajax搜索</title>
<script type="text/javascript">
//獲得更多關(guān)聯(lián)信息的函數(shù)
function getMore(){
var xmlHttp;
//首先獲得用戶的輸入
var content = document.getElementById("keyword");
if(content.value==""){
keywordBlur();//執(zhí)行一下清空方法，使搜索框在無數(shù)據(jù)的時(shí)候，下方殘留數(shù)據(jù)也動(dòng)態(tài)清空
return;
}
//alert(content.value);
//要給服務(wù)器發(fā)送用戶輸入的內(nèi)容，要?jiǎng)?chuàng)建對(duì)象,叫XmlHttp對(duì)象
//xmlHttp=獲得XmlHttp對(duì)象
xmlHttp=CreatXMLHttp();
//alert(xmlHttp);
//要給服務(wù)器發(fā)送數(shù)據(jù)
var url="serch?keyword="+escape(content.value);
//如果不用escape這個(gè)函數(shù)轉(zhuǎn)化一下的話，傳中文會(huì)有問題
//true表示javascript的腳本會(huì)在send()方法之后繼續(xù)執(zhí)行，而不會(huì)等待來自服務(wù)器的相應(yīng)
xmlHttp.open("GET",url,true);
//xmlHttp綁定一個(gè)回調(diào)方法去接受服務(wù)器傳來的相應(yīng),會(huì)在xmlHttp狀態(tài)改變的時(shí)候被調(diào)用
//xmlHttp有0~4的狀態(tài)，只關(guān)心4的方法
//4為complete狀態(tài)，表示交互完成，當(dāng)交互完成時(shí)才會(huì)調(diào)用回調(diào)方法
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);//send里面發(fā)送的是內(nèi)容體，但參數(shù)在URL里已經(jīng)都寫完了
//回調(diào)函數(shù)==!!注意 這里回調(diào)方法要在方法內(nèi)創(chuàng)建，因?yàn)閯?chuàng)建的xmlHttp對(duì)象不是全局變量
//是在getMore()方法里創(chuàng)建的，可以將變量提取出來，變成全局變量
function callback(){
if (xmlHttp.readyState==4){
//200代表服務(wù)器相應(yīng)成功。。。404代表資源未找到。。500服務(wù)器內(nèi)部錯(cuò)誤
if(xmlHttp.status==200){
//交互成功，獲得相應(yīng)的數(shù)據(jù)，是文本格式
var result=xmlHttp.responseText;
//解析json格式
var json=eval("("+result+")");//要在兩邊加個(gè)小括號(hào)，js才能認(rèn)識(shí)
//獲得數(shù)據(jù)之后就可以開始展示了。在輸入框的下邊展示
setContent(json);
}
}
}
//設(shè)置關(guān)聯(lián)數(shù)據(jù)展示,參數(shù)代表的是服務(wù)器傳遞過來的關(guān)聯(lián)數(shù)據(jù)
function setContent(contents){
//setLocation();//設(shè)置跟輸入框一樣寬度
keywordBlur();//在每次得到值之前先清空一下之前的殘留數(shù)據(jù)
var size=contents.length;//根據(jù)關(guān)聯(lián)的數(shù)據(jù)長(zhǎng)度，來生成多少<tr>
//設(shè)置內(nèi)容
for(var i=0;i<size;i++){
//不用appendChild()方法是因?yàn)椴煌瑸g覽器可能不兼容該方法
var nextNode=contents[i];//代表json格式的第i個(gè)元素
var newRow=content_table_body.insertRow();//創(chuàng)建行
var newCell=newRow.insertCell();//創(chuàng)建單元格
newCell.innerHTML=contents[i];//將數(shù)據(jù)賦值給單元格
}
}
}
//獲得XmlHttp對(duì)象
function CreatXMLHttp(){
//要考慮不同瀏覽器的寫法
//大多數(shù)瀏覽器使用
var xmlHttpReq;
if(window.XMLHttpRequest){//火狐
xmlHttpReq=new XMLHttpRequest();
}else{
/* if(window.ActiveXObject){
xmlHttpReq=neww ActiveXObject("Microsoft.XMLHTTP");
//例如ie有很多版本，不一定能創(chuàng)建出來這個(gè)對(duì)象，所以要添加以下一個(gè)判斷
//換一種方法，保證創(chuàng)建
if(!xmlHttp){
xmlHttpReq=new ActiveObject("Msxml2.XMLHTTP");
}
} */
//一定要如下格式寫 上述格式火狐IE親測(cè)不好使
try { //IE
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
try {//IE 瀏覽器
xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
}
}
}
return xmlHttpReq;
}
//失去焦點(diǎn)的時(shí)候
function keywordBlur(){
//要獲得body的元素長(zhǎng)度，才能知道要遍歷多少次
var contentTableBody=document.getElementById("content_table_body");
var size=contentTableBody.childNodes.length;
//因?yàn)槭莿h除子節(jié)點(diǎn)，所以是從后往前才能刪，同二叉樹，刪除子節(jié)點(diǎn)
for(var i=size-1;i>=0;i--){
contentTableBody.removeChild(contentTableBody.childNodes[i]);
}
document.getElementById("popDiv").style.border="none";
}
</script>
<style type="text/css">
/* #mydiv{
position: absolute;
left:30%;
top:50%;
margin-left: 100px;
} */
.mouseOver{
background: #708090;
color: #FFFAFA;
}
.mouseOut{
background: #FFFAFA;
color: #000000;
}
</style>
</head>
<body>
<div id="mydiv">
<!-- 輸入框 -->
<input type="text" id="keyword" size="50" onblur="keywordBlur()" onkeyup="getMore()" onfocus="getMore()"/>
<input type="button" value="百度一下" wise="50px">
<!-- 下面是內(nèi)容展示的區(qū)域 -->
<div id="popDiv">
<table id="contentTable" bgcolor="#FFFAFA" border="0" cellpadding="0" cellspacing="0">
<tbody id="content_table_body">
<!-- 這個(gè)是動(dòng)態(tài)查詢出來的數(shù)據(jù)顯示的地方 -->
<!-- <tr><td>ajax1</td></tr>
<tr><td>ajax2</td></tr>
<tr><td>ajax3</td></tr> -->
</tbody>
</table>
</div>
</div>
</body>
</html>
SearchServlet.class
package com.ninka;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class SearchServlet extends HttpServlet{
static List<String> datas = new ArrayList<String>();
static{
datas.add("ajax1");
datas.add("ajax2");
datas.add("ajax3");
datas.add("bichi1");
datas.add("bichi2");
datas.add("php");
datas.add("javascript");
datas.add("java");
datas.add("html");
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//設(shè)置下編碼格式
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
System.out.println("123");
//首先獲得客戶端傳來的數(shù)據(jù),,注意傳過來的參數(shù)關(guān)鍵字一定要寫對(duì)，否則會(huì)空指針異常
String keyword = request.getParameter("keyword");
//獲得關(guān)鍵字之后進(jìn)行處理，得到關(guān)聯(lián)數(shù)據(jù)
List<String> listData = getData(keyword);
//返回json格式
System.out.println(JSONArray.fromObject(listData));
//JSONArray.fromObject(listData);
response.getWriter().write(JSONArray.fromObject(listData).toString());
}
//獲得關(guān)聯(lián)數(shù)據(jù)方法
public List<String> getData(String keyword){
List<String> list = new ArrayList<String>();
for(String data:datas){
//如果傳遞過來的數(shù)據(jù)，屬于詞庫(kù)里面的話，那么就把包含關(guān)鍵詞的數(shù)據(jù)打包成list，向客戶端傳
if(data.contains(keyword)){
list.add(data);
}
}
return list;
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"> <display-name>ajaxtest</display-name> <welcome-file-list> <welcome-file>search.jsp</welcome-file> </welcome-file-list> <servlet> <!-- 為什么要用search？因?yàn)樵趈s中定義url的時(shí)候?qū)懙氖莝earch --> <servlet-name>search</servlet-name> <servlet-class>com.ninka.SearchServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>search</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app>
以上所述是小編給大家介紹的Servlet+Ajax實(shí)現(xiàn)智能搜索框智能提示功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- 使用Ajax模仿百度搜索框的自動(dòng)提示功能實(shí)例
- Ajax實(shí)現(xiàn)智能提示搜索功能
- ASP.NET搭配Ajax實(shí)現(xiàn)搜索提示功能
- 利用AjaxControlToolkit實(shí)現(xiàn)百度搜索時(shí)的下拉列表提示詳細(xì)步驟
- php+ajax做仿百度搜索下拉自動(dòng)提示框(有實(shí)例)
- asp+ajax仿google搜索提示效果代碼
- asp.net+js實(shí)現(xiàn)的ajax sugguest搜索提示效果
- ajax Suggest類似google的搜索提示效果
- Ajax實(shí)現(xiàn)搜索框提示功能
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了基于ajax實(shí)現(xiàn)驗(yàn)證碼功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
Ajax校驗(yàn)是否重復(fù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了Ajax校驗(yàn)是否重復(fù)的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
Ajax傳Jsond Mvc后臺(tái)接收實(shí)例
Ajax傳Jsond Mvc后臺(tái)接收，前后臺(tái)實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-06-06
基于bootstrap的上傳插件fileinput實(shí)現(xiàn)ajax異步上傳功能(支持多文件上傳預(yù)覽拖拽)
這篇文章主要介紹了基于bootstrap的上傳插件fileinput 的ajax異步上傳功能(支持多文件上傳預(yù)覽拖拽),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
通過Ajax進(jìn)行Post提交Json數(shù)據(jù)的方法
下面小編就為大家分享一篇通過Ajax進(jìn)行Post提交Json數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
AJAX 是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)的藝術(shù),在不重新加載整個(gè)頁(yè)面的情況下,通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新,下面這篇文章主要給大家介紹了關(guān)于原生Ajax之全面了解xhr的概念與使用的相關(guān)資料,需要的朋友可以參考下2022-11-11
本篇文章將向大家介紹如何通過jquery的load方法進(jìn)行局部刷新，通過封裝三個(gè)屬性然后我們來使用，以此達(dá)到我們想要的效果，本文寫的非常好，感興趣的朋友一起看看吧2015-09-09
這篇文章主要給大家介紹了關(guān)于Ajax的疑難雜癥,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
Ajax的jsonp方式跨域獲取數(shù)據(jù)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄狝jax的jsonp方式跨域獲取數(shù)據(jù)的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了ajax同步驗(yàn)證單號(hào)是否存在的方法,涉及基于ajax的數(shù)據(jù)交互相關(guān)操作技巧,需要的朋友可以參考下2016-08-08