一、JqueryAutoComplete.html 页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>页面的自动补全</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.js"> </script>
<script type="text/javascript" src="js/jquertAutoFill.js"></script>
</head>
<body>
请输入你想查找的内容：<input type="text" id="word"/>
<input type="button" value="提交"/><br />
<div id="auto"></div>
</body>
</html>
二、jquertAutoFill.js 文件
//jquery自动补全
//定义全局变量
var highlightindex = -1; //表示高亮的节点
var timeoutId; //表示延時向服务器发送请的时间
/*Ajax 自动补全*/
//注册页面装在时执行的方法
$(document).ready(function () {
//得到文本框对象
var wordInput = $("#word");
//得到文本框距离屏幕左边距和上边的距离
var wordInputOffset = wordInput.offset();
//自动补全框最开始隐藏起来
//添加样式必须现价 css("position","absolute")属性
$("#auto").hide().css("border", "1px black solid").css("position", "absolute").css("top", wordInputOffset.top + wordInput.height() + 6 + "px").css("left", wordInputOffset.left + "px").width(wordInput.width() + 2);
//给文本框添加键盘按下并弹起的事件
$("#word").keyup(function (event) {
//处理文本框中的键盘事件
//得到弹出框对象
var autoNode = $("#auto");
//得到当前按键的code值
var myEvent = event || window.evnet;
var keyCode = myEvent.keyCode;
//如果输入的是字母，应该将文本框最新的信息发送给服务器
//如果输入的是退格键或删除键，也应该将文本框的信息发送给服务器
if (keyCode >= 65 || keyCode <= 90 || keyCode == 8 || keyCode == 46) {
//1、首先获取文本框的内容
var wordText = $("#word").val();
//文本内容不为空才将文本框内容发给服务器
if (wordText != "") {
//2、将文本框的内容发给服务器
//对上次未执行的延时做清除操作
clearTimeout(timeoutId);
//对服务器端进行交互延迟500ms,避免快速打字造成的频繁请求
timeoutId = setTimeout(function(){
$.post("AutomaticFillServlet", {word:wordText}, function (data) {
//将dom对象data转换成JQuery的对象
var jqueryobj = $(data);
//找到所有word节点
var wordNodes = jqueryobj.find("word");
//遍历所有的word节点，取出单词内容，然后将单词内容添加到弹出框中
//清空div里原来的内容
autoNode.html("");
wordNodes.each(function (i) {
//获取单词
var wordNode = $(this);
//新建div节点,将单词内容加入到新建的节点中
//将新建的节点加入到弹出框的节点中
var newDivNode = $("<div>").attr("id",i);
newDivNode.html(wordNode.text()).appendTo(autoNode);
//添加鼠标进入事件,高亮节点
newDivNode.mouseover(function(){
//将原来高亮的节点取消
if(highlightindex != -1){
$("#auto").children("div").eq(highlightindex).css("background-color","white");
}
//记录新的高亮节点
highlightindex = $(this).attr("id");
$(this).css("background-color","red");
});
//鼠标移出，取消高亮
newDivNode.mouseout(function(){
//取消节点的高亮
$(this).css("background-color","white");
});
//鼠标补全
newDivNode.click(function(){
//文本框的内容变成高亮显示的内容
$("#word").val($(this).text());
//隐藏弹出窗体
$("#auto").hide();
});
});
//如果服务服务器端有数据,则显示弹出框
if (wordNodes.length > 0) {
autoNode.show();
} else {
autoNode.hide();
//弹出框隐藏时没有高亮显示的节点
highlightindex = -1;
}
}, "xml");
},500);
} else {
autoNode.hide();
//弹出框隐藏时没有高亮显示的节点
highlightindex = -1;
}
} else if(keyCode == 38) { //向上键
//得到弹出框的所有子节点
var autoNodes = $("#auto").children("div");
if(highlightindex != -1){
//如果原来存在高亮显示节点，则将背景色改为白色
autoNodes.eq(highlightindex).css("background-color","white");
//将highlightindex等于零的情况单独拿出来处理
if(highlightindex == 0){
highlightindex = autoNodes.length - 1;
}else{
highlightindex--;
}
}else{
highlightindex = autoNodes.length - 1;
}
//让现在高亮的内容变成红色
autoNodes.eq(highlightindex).css("background-color","red");
}else if(keyCode == 40){ //向下键
//得到弹出框的所有子节点
var autoNodes = $("#auto").children("div");
if(highlightindex != -1){
//如果原来存在高亮显示节点，则将背景色改为白色
autoNodes.eq(highlightindex).css("background-color","white");
}
highlightindex++;
if(highlightindex == autoNodes.length){
highlightindex = 0;
}
//让现在高亮的内容变成红色
autoNodes.eq(highlightindex).css("background-color","red");
}else if (keyCode == 13) {
//如果输入的是回车
if(highlightindex != -1){
//取出高亮显示下拉框的内容
var comText = $("#auto").hide().children("div").eq(highlightindex).text();
//文本框的内容变成高亮显示的内容
$("#word").val(comText);
highlightindex = -1;
}else{
var obj = $("#word");
var count = obj.val();
obj.val("");
alert("文本框中的[" + count + "]被提交了");
//让文本框失去焦点
obj.get(0).blur();
}
}
});
//给按钮添加事件，表示文本框中的数据被提交
$("input[type='button']").click(function () {
alert("\u6587\u672c\u6846\u4e2d\u7684[" + $("#word").val + "]\u88ab\u63d0\u4ea4\u4e86");
});
});
三、AutomaticFillServlet.java 类
package serverlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 自动补全
* 向客服端返XML数据的servlet
* @author Administrator
*
*/
@SuppressWarnings("serial")
public class AutomaticFillServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
//获得页面传过来的字符串
String word = request.getParameter("word");
//将字符串保存在request对象中
request.setAttribute("word",word);
//将请求转发给视图层（注意Ajax中，这个所谓的视图层不返回页面，只返回数据,所以也可以称作是一个数据层）
//将"wordxml.jsp"处理后的数据发给 "JqueryAutoComplete.html"页面
request.getRequestDispatcher("wordxml.jsp").forward(request, response);
}
public void init() throws ServletException
{
}
public void destroy()
{
super.destroy();
}
}
四、wordxml.jsp 文件
<%--
自动补全的Ajax实例
--%>
<%@ page contentType="text/xml; charset=UTF-8" language="java" %>
<!-- 返回xml数据的“视图层”暂时不做任何逻辑判断,先将所有的单词都返回、待前后台应用可以完整的协作后，在限制返回的内容 -->
<%
//页面端传送的字符串
String word = (String)request.getParameter("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("abandin".startsWith(word)){
%>
<word>abandin</word>
<%
}
if("breach".startsWith(word)){
%>
<word>breach</word>
<%
}
if("break".startsWith(word)){
%>
<word>break</word>
<%
}
if("bad".startsWith(word)){
%>
<word>bad</word>
<%}%>
</words>
相关推荐
首先，"jquery 自动补全 例子"是指使用jQuery库来创建一个自动补全的功能，这种功能通常用于在用户输入文本时提供匹配建议。这在网页设计中是非常实用的特性，尤其对于有大量可选项或需要快速查找的场景。 "jquery ...
**jQuery自动补全插件详解** 在Web开发中，用户输入常常是交互体验的重要环节，为了提高用户体验，很多网站和应用引入了自动补全（Autocomplete）功能。jQuery作为一个广泛使用的JavaScript库，提供了丰富的插件...
**jQuery自动补全插件详解** 在Web开发中，用户界面的交互性和便捷性是提升用户体验的关键因素之一。其中，自动补全功能是一项常见的需求，它可以在用户输入时提供预测建议，大大加快输入速度，降低错误率。jQuery...
虽然jQuery本身并不直接提供代码补全功能，但很多编辑器和IDE都有针对jQuery的插件或扩展，提供jQuery函数和选择器的自动补全。例如，VSCode中的jQuery IntelliSense插件就是一个很好的例子。 将PHP和jQuery结合...
jQuery自动补全效果是一种常见的前端交互功能，常用于搜索框、表单输入等场景，能够为用户提供便捷的建议列表，提高用户体验。这个功能基于流行的JavaScript库jQuery实现，它简化了DOM操作，使得创建动态和交互式的...
在这个自动补全例子中，jQuery负责前端交互和动态数据显示。 **Servlet简介** Servlet是Java Web应用程序的一部分，用于处理服务器端的HTTP请求。它们通常用于接收、处理并响应客户端发送的数据。在这个例子中，...
jQuery Autocomplete是jQuery UI库中的一个强大组件，它为用户提供了在输入框中输入文本时的自动补全功能。这个功能极大地提升了用户体验，尤其是在需要用户输入特定关键字或从大量数据中选择的情况下。让我们深入...
在介绍jQuery自动补全之前，我们先来回顾一下jQuery的基础知识。jQuery是一个JavaScript库，它简化了DOM操作、事件处理、动画设计和Ajax交互。通过使用$符号，我们可以快速地选中页面元素并对其进行操作。例如，`$(...
"jQuery 插件demo 自动补全"是指一个使用jQuery编写的插件示例，它实现了自动补全的功能，通常在输入框中输入文字时，会根据已输入内容动态显示匹配的建议列表。这种功能常见于搜索框、地址栏等场景，提高了用户输入...
jQuery Suggest插件就是这样一个工具，它为网页中的输入框提供了自动补全功能，使得用户在输入时能快速找到并选择所需的内容，大大提高了输入效率。本篇文章将深入探讨jQuery Suggest插件的使用方法、原理以及如何...
在本示例中，“jQuery实现输入框自动补全邮箱提示”是指利用jQuery来创建一个功能，当用户在输入框中输入时，系统会自动提供匹配的邮箱地址作为提示，提高用户体验。这种功能在注册或联系表单中非常常见，可以减少...
总结起来，这个实例展示了如何利用Java后端和jQuery前端，结合AJAX技术，实现一个动态的自动补全功能。用户输入时，前端通过AJAX向服务器发送请求，服务器处理请求并返回JSON数据，前端再将这些数据解析并展示给用户...
在PHP中，虽然没有内置的自动补全功能，但可以通过JavaScript库（如jQuery UI的Autocomplete插件）在前端实现，后端PHP负责提供补全建议的数据。例如，你可以创建一个API接口，接收用户的输入，查询数据库中相关的...
在本文中，我们将深入探讨如何使用jQuery和Ajax技术来实现一个搜索框的自动补全功能，就像百度搜索引擎那样的用户体验。这个功能允许用户在输入搜索关键词时，系统会根据已有的数据提供相关的建议，从而提高搜索效率...
本示例中的"jQuery文本框input输入关键字自动补全筛选代码"是利用jQuery实现的一种常见用户体验增强功能，通常用于网站的搜索框，当用户在文本框中输入关键词时，系统会实时显示与输入关键词匹配的相关建议，提升...
**jQuery 实例详解：防Google自动补全** jQuery 是一个高效、简洁且强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和AJAX交互。在"传智播客Jquery实例(防google自动补全)"的课程中，主要探讨的是...
综上所述，本示例中的"autocomplete自动补全的例子jsp"展示了如何在JSP项目中结合jQuery UI的Autocomplete插件，实现实时的搜索建议功能。通过前后端的协同工作，我们可以为用户提供便捷的输入体验，提升项目的整体...
在本案例中，我们将探讨如何使用Ajax来实现一个类似百度搜索框的自动补全功能。 首先，我们需要创建一个HTML页面作为用户界面，包含一个输入框和一个隐藏的div，用于显示补全建议。这个输入框将监听用户的输入事件...