【AJAX】AJAX实现搜索信息自己主动推荐并补全
好久没有继续看AJAX的视频教程了,今天就将最后一个教程案例做完。我们在搜索引擎中输入文字时文本框下会提示对应的信息，这个案例就是实现这样的基本功能，代码比較粗糙还须要进一步完好，当中有些地方也须要向大神们请教一下。完毕效果截图：
一、事先代码准备工作：
1. JQueryAutoComplete.html负责页面端的显示
a) 截图例如以下：
![]()
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTFpHU180/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
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 {
@Override
protected 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);
} @Override
protected 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：仅仅要你还在尝试。
就不算失败。
【AJAX】AJAX实现搜索信息自己主动推荐并补全的更多相关文章
- [转]Sublime Text 新建文件快速生成Html【头部信息】和【代码补全】、【汉化】
Sublime Text 新建文件快速生成Html[头部信息]和[代码补全].[汉化] 真心越来越喜欢sublime 这个工具,高效便捷,渐渐离不了了! 安装package control简单的安装方 ...
- [tool] google搜索的正确使用姿势(待补全)
第一,也是非常重要的前提,请一定要能FQ.如果这条没有解决,没有往下的必要 现在我假设你已经能FQ了,个人推荐使用搜索引擎的顺序: Google>微软bing国际搜索>百度 (百度总能给你 ...
- vim：隆重推荐括号补全插件--auto-pairs
太好用了,括号相关的各种麻烦都一一解决,剩下的就是熟练,熟练,在熟练了.呵呵 连教程都做得这么好,先放这里,以后慢慢翻译. Auto Pairs Insert or delete brackets, ...
- MSClass 和setInterval 的并发，ajax定时有采集信息滚动显示
setTimeout 用于延时器,只执行一次. setInterval:用于多次执行. //****************************************** 项目中引用到jquer ...
- jquery通过AJAX从后台获取信息并显示在表格上的类
前一阵我写了:<jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中.>现在,我把他们处理了一下,不需要每次写代码了: 具体代码如下: //获取数据并显示数据表格 funct ...
- jquery通过AJAX从后台获取信息并显示在表格上，并支持行选中
不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDi ...
- Django中,ajax检测注册用户信息是否可用?
ajax检测注册用户信息主体思路 1.在settings.py中配置需要使用的信息 #对static文件进行配置 STATICFILES_DIRS=[ os.path.join(BASE_DIR,'s ...
- 第三百三十四节，web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻，爬取Ajax动态生成的信息
第三百三十四节,web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻,爬取Ajax动态生成的信息 crapy爬取百度新闻,爬取Ajax动态生成的信息,抓取百度新闻首页的新闻rul地址 有多 ...
- 十三 web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻，爬取Ajax动态生成的信息
crapy爬取百度新闻,爬取Ajax动态生成的信息,抓取百度新闻首页的新闻rul地址 有多网站,当你浏览器访问时看到的信息,在html源文件里却找不到,由得信息还是滚动条滚动到对应的位置后才显示信息, ...
随机推荐
- 1.Node.js
转自:http://www.runoob.com/nodejs/nodejs-tutorial.html 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基 ...
- Elasticsearch之es学习工作中遇到的坑（陆续更新）
1:es集群脑裂问题(不要用外网ip,节点角色不要混用) 原因1:阿里云服务器,外网有时候不稳定. 解决方案:单独采购服务器,内网安装 原因2:master和node节点没有分开 解决方案: 分角色: ...
- mahout算法库（四）
mahout算法库 分为三大块 1.聚类算法 2.协同过滤算法(一般用于推荐) 协同过滤算法也可以称为推荐算法!!! 3.分类算法 算法类 算法名 中文名 分类算法 Log ...
- vim学习2
进入插入模式: 在插入模式下删除: 寄存器
- mysql-5.7.19-winx64服务无法启动解决方案
解压mysql压缩包时没有data文件夹,不要手动创建,在cmd下直接运行命令: mysqld –initialize-insecure,data文件夹会自动生成,注意单词千万不要拼错,不要写成–in ...
- 腾讯官网生成qq在线客服代码
http://jingyan.baidu.com/article/e2284b2b42ce8ce2e6118ddd.html
- 重排序列 & 拓扑排序
http://bookshadow.com/weblog/2016/10/30/leetcode-sequence-reconstruction/ 这道题目,检查重排的序列是否一致. 用了拓扑排序. ...
- 【软件project】机房收费系统之图形回想
[背景]通过一阶段的学习.自己整理了整理机房收费系统.以下想通过几张图来回顾一下机房的总体流程.此图形仅仅代表鄙人现阶段的理解.本文仅供參考,若有不妥的地方,请积极指正. 1.机房收费系统业务流程图 ...
- 15.lambda表达式
#include <iostream> #include <array> using namespace std; //解决函数怀孕现象 //[](){} //[] =引用,只 ...
- 利用ServiceWorker实现页面的快速加载和离线访问
Service workers 本质上充当Web应用程序与浏览器之间的代理服务器,也可以在网络可用时作为浏览器和网络间的代理.它们旨在(除其他之外)使得能够创建有效的离线体验,拦截网络请求并基于网络是 ...