溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Servlet+Ajax如何實(shí)現(xiàn)智能搜索框智能提示功能

發(fā)布時(shí)間：2021-05-18 13:48:39 來源：億速云 閱讀：164 作者：小新 欄目：web開發(fā)

小編給大家分享一下Servlet+Ajax如何實(shí)現(xiàn)智能搜索框智能提示功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

利用無刷新技術(shù)智能變換搜索框的提示，同百度搜索

效果圖

Servlet+Ajax如何實(shí)現(xiàn)智能搜索框智能提示功能

其基本原理：

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包

Servlet+Ajax如何實(shí)現(xiàn)智能搜索框智能提示功能

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ù)，屬于詞庫里面的話，那么就把包含關(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)智能搜索框智能提示功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手