【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><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></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) 初始代码例如以下（后期需改动）：

<!-- 这个JSP返回的是XML数据，contentType的值是text/xml -->
<%@ pagelanguage="java" contentType="text/xml; charset=UTF-8"pageEncoding="utf-8"%>
<!-- 返回XML数据，将全部数据都返回，等待后台能够完整协作后再限制返回内容 -->
<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代码为

<!-- 这个JSP返回的是XML数据，contentType的值是text/xml -->
<%@ pagelanguage="java" contentType="text/xml; charset=UTF-8"pageEncoding="utf-8"%>
<!-- 返回XML数据，将全部数据都返回，等待后台能够完整协作后再限制返回内容 -->
<%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实现搜索信息自己主动推荐并补全相关推荐

ajax 错误信息error,jquery ajax的error错误信息
项目开发中ajax的异常处理起来算是比较头疼的,因为是异步请求,所以即使ajax异常程序依然会继续执行,导致找ajax的异常比较麻烦. 今天处理ajax异常时搜到一篇文章,提到error可以返回aja ...
ajax仿百度搜索效果,利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）...
实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 * { margin: 0px; padding: 0px; } #wrapper { height: 100% ...
js ajax获得对象怎么放到td上,jquery通过AJAX从后台获取信息并显示在表格上，并支持行选中...
不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDi ...
百度ajax搜索,ajax实现百度搜索建议
function chooseIt(obj)//obj是用this传递过来的当前点击对象 { document.getElementById("search").value=obj ...
Ajax实现搜索联想自动补全
什么是搜索联想?自动补全? .百度是一个很典型的代表.在百度的搜索框中输入相关信息的时候,会有搜索联想以及自动补全. .搜索联想和自动补全:实际上是为了方便用户的使用.让用户的体验更好. .搜索联想: ...
AJAX+PHP+MySQL搜索(亲测可用附源码)
改自:https://blog.csdn.net/weixin_39927850/article/details/81022812 但是它的代码有点问题,所以我这边改了改,最终成功运行源码 inde ...
Ajax实现百度搜索框自动提示功能
Ajax实现百度搜索框自动提示功能当你在搜索框内写入关键字时下拉框会匹配和你输入的关键字相匹配的信息文章目录 Ajax实现百度搜索框自动提示功能一.实现效果二.代码实现 1.前端页面 2.后端 ...
python爬百度新闻_13、web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻，爬取Ajax动态生成的信息...
crapy爬取百度新闻,爬取Ajax动态生成的信息,抓取百度新闻首页的新闻rul地址有多网站,当你浏览器访问时看到的信息,在html源文件里却找不到,由得信息还是滚动条滚动到对应的位置后才显示信息, ...
java jquery提交表单数据_[Java教程]jquery实现ajax提交表单信息
[Java教程]jquery实现ajax提交表单信息 0 2016-08-23 15:00:08 最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习 ...

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

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

最新文章

热门文章