當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【AJAX】AJAX实现搜索信息自己主动推荐并补全

發布時間：2025/3/15 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了【AJAX】AJAX实现搜索信息自己主动推荐并补全小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? ? ? ? 好久沒有繼續看AJAX的視頻教程了,今天就將最后一個教程案例做完。我們在搜索引擎中輸入文字時文本框下會提示對應的信息，這個案例就是實現這樣的基本功能，代碼比較粗糙還須要進一步完好，當中有些地方也須要向大神們請教一下。完畢效果截圖：

一、事先代碼準備工作：

1.?? JQueryAutoComplete.html負責頁面端的顯示

a)?????截圖例如以下：

b)????代碼例如以下：

<!DOCTYPE html> <html><head><title>自己主動補全演示樣例</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="jslib/jQuery.js"></script> <span style="white-space:pre"> </span><script type="text/javascript" src="jslib/jqueryauto.js"></script></head><body>補全演示樣例：<span style="white-space:pre"> </span><input type="text" id="word"/><span style="white-space:pre"> </span><input type="button" value="提交"/><br/><span style="white-space:pre"> </span><div id="auto"></div></body> </html>

c)?????注：頁面端HTML代碼基本上在后面的編寫中不會改變。

2.?? jqueryauto.js負責對頁面元素進行更改

3.?? wordxml.jsp存儲信息推薦的XML數據

a)?????初始代碼例如以下（后期需改動）：

<%@ pagelanguage="java" contentType="text/xml; charset=UTF-8"pageEncoding="utf-8"%>  <words><word>absolute</word><word>anyone</word><word>anything</word><word>apple</word><word>abandon</word><word>breach</word><word>break</word><word>boolean</word> </words>

4.?? AutoComplete.java后臺Servlet

a)?????初始代碼例如以下（為了簡單起見Servlet不會進行推斷操作。所以后面基本上也不會進行更改）：

import java.io.IOException; importjavax.servlet.RequestDispatcher; importjavax.servlet.ServletException; importjavax.servlet.http.HttpServlet; importjavax.servlet.http.HttpServletRequest; importjavax.servlet.http.HttpServletResponse; /*** @author Ginger* 補全內容后臺代碼*接收用戶請求*/ public class AutoCompleteextends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponseresp)throws ServletException, IOException {String word=req.getParameter("word"); // 將字符串保存在request對象中req.setAttribute("word", word); // 請求轉發到視圖層RequestDispatchertemp=req.getRequestDispatcher("wordxml.jsp");temp.forward(req, resp);}@Overrideprotected void doPost(HttpServletRequest req,HttpServletResponse resp)throws ServletException, IOException {doGet(req, resp);} }

二、接下來我們就對jqueryauto.js進行編寫

代碼的功能能夠依據功能和先后順序分為：

1.?? 設置推薦文字彈出框auto的樣式：

2.?? 設置button的點擊事件：

3.?? 為輸入文本框加入鍵盤事件

a)?????鍵盤事件分對當按下字母鍵、上下鍵、回車鍵時進行處理：

??????????????????????????i.?????????字母鍵：向后臺提交文本框數據

?????????????????????????ii.?????????上下鍵：設置推薦文本被高亮的效果

???????????????????????iii.?????????回車鍵：模擬button被點擊的效果

4.?? 終于代碼

//表示當前高亮的節點 var highlightindex=-1; $(document).ready(function(){ // 依據輸入框設置彈出框的樣式var wordInput=$("#word");var wordInputOffset=wordInput.offset();//隱藏自己主動補全div框$("#auto").hide().css("border","1pxblack solid").css("position","absolute") .css("top",wordInput.height()+wordInputOffset.top+"px").css("left",wordInputOffset.left+"px").width(wordInput.width());// 為文本框加入鍵盤按下并彈起事件$("#word").keyup(function(event){ // 處理文本框中的鍵盤事件 // 假設輸入字母、退格鍵、刪除鍵，則將信息發送到server var myEvent=event || window.event;var keyCode=myEvent.keyCode;if(keyCode>=65&&keyCode<=90 || keyCode==8 ||keyCode==46){// 1.首先獲取文本框內容var wordText=$("#word").val();// 2.將內容發送給server(文本不為空的情況下才發送數據)var autoNode=$("#auto");if(wordText!=""){$.post("AutoComplete",{word:wordText},function(data){// 2.1轉換dom對象為JQuery對象var jqueryObj=$(data);// 2.2找到全部word節點varwordNodes=jqueryObj.find("word");// 2.3遍歷全部word節點。取出單詞內容，加入到auto彈出框中// 每次提交數據前清空補全框數據autoNode.html("");$(wordNodes).each(function(i){// 獲取單詞內容var wordNode=$(this); // 將節點加入到彈出框中 autoNode.append($("<div>").html(wordNode.text()));});if(wordNodes.length >0){autoNode.show();}else{autoNode.hide();} },"xml");}else{autoNode.hide(); // 隱藏彈出框同一時候重置高亮值highlightindex=-1;}}else if(keyCode==38 || keyCode==40){ // 假設輸入上下button，則補全內容會被選中if(keyCode==38){ // 向上 // 找到當前補全框的全部子節點varautoNodes=$("#auto").children("div");if(highlightindex!=-1){ // 假設原來存在高亮節點。則將背景改為白色autoNodes.eq(highlightindex).css("background-color","white").css("color","black");highlightindex--;}else{highlightindex=autoNodes.length-1;}if(highlightindex==-1){ // 假設改動索引值后index變成-1，則將索引值指向最后一個元素highlightindex=autoNodes.length-1;}autoNodes.eq(highlightindex).css("background-color","blue").css("color","white");}if(keyCode==40){ // 向下 // 找到當前補全框的全部子節點varautoNodes=$("#auto").children("div");if(highlightindex!=-1){ // 假設原來存在高亮節點。則將背景改為白色autoNodes.eq(highlightindex).css("background-color","white").css("color","black");}highlightindex++;if(highlightindex==autoNodes.length){ // 假設改動索引值后index變成-1，則將索引值指向最后一個元素highlightindex=0;}autoNodes.eq(highlightindex).css("background-color","blue").css("color","white");} }else if(keyCode==13){// 假設輸入回車// 補全框中有選中內容if(highlightindex!=-1){varautoNodes=$("#auto").children("div");// 將高亮文本賦給輸入框$("#word").val(autoNodes.eq(highlightindex).text());highlightindex=-1;$("#auto").hide();alert("已提交。");}else{// 補全框中沒有選中內容alert("已提交。");$("#auto").hide();}}}); // 為button添加點擊事件$("input[type='button']").click(function(){alert("已提交。");}) });

三、最后是在后臺進行數據的篩選

終于wordxml.jsp代碼為

<%@ pagelanguage="java" contentType="text/xml; charset=UTF-8"pageEncoding="utf-8"%>  <%String word=(String)request.getAttribute("word"); %> <words><% if("absolute".startsWith(word)){ %><word>absolute</word><%}%><% if("anyone".startsWith(word)){ %><word>anyone</word><%}%><% if("anything".startsWith(word)){ %><word>anything</word><%}%><% if("apple".startsWith(word)){ %><word>apple</word><%}%><% if("abandon".startsWith(word)){ %><word>abandon</word><%}%><% if("breach".startsWith(word)){ %><word>breach</word><%}%><% if("break".startsWith(word)){ %><word>break</word><%}%><% if("boolean".startsWith(word)){ %><word>boolean</word><%}%> </words>
Author:事始

Sign：僅僅要你還在嘗試。

就不算失敗。

轉載于:https://www.cnblogs.com/gcczhongduan/p/5089480.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的【AJAX】AJAX实现搜索信息自己主动推荐并补全的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【PHP】月末・月初の出力方法
下一篇：读《大道至简—是懒人造就了方法》有感