做了一个简单的根据用户输入前面字母，给出相应的补全提示：
1 显示页面JqueryAutocomplete.html：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jquery实例：自动补全</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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="jqueryLib/jquery-1.4.1.js"></script>
<script type="text/javascript" src="jqueryLib/jqueryauto.js"></script>
</head>
<body>
<input type="text" id="word" />
<input type="button" value="提交" /><br/>
<div id="auto"></div><!-- 弹出框 -->
</body>
</html>
2 使用到的jqueryauto.js:
//自动补全框最开始应该隐藏起来
//表示当前高亮的节点
var highlightindex = -1;
var timeoutId;
$(document).ready(function(){
var wordInput = $("#word");
var wordInputoffset = wordInput.offset();
$("#auto").hide().css("border","1px black solid").css("position","absolut")
.css("top",wordInputoffset.top + wordInput.height() + 5 + "px")
.css("left",wordInputoffset.left + "px")
.width(wordInput.width() + 2);
//给文本框添加键盘按下并弹起的时间
wordInput.keyup(function(event) {
//处理文本框中的键盘事件
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
//如果输入的是字母，应该将文本框中的最新的信息发送给服务器
//如果输入的是退格键（键值是8）或者删除键（键值是46），应该将文本框中的最新的信息发送给服务器
if(keyCode >=65 && keyCode <=90 || keyCode == 8 || keyCode == 46) {
//1.获取文本框里的内容
var wordText = $("#word").val();
var autoNode = $("#auto");
if(wordText != "") {
//2.将文本框的内容发送给服务器
//对上次未完成的延时操作进行取消
clearTimeout(timeoutId);
//对于服务器端进行延迟500毫秒，避免快速打字造成的频繁请求服务器
timeoutId = setTimeout(function(){
$.post("AutoComplete",{word:wordText},function(data) {
//将dom对象data转换成jquery对象
var jqueryObj = $(data);
//找到所有的word节点
var wordNodes = jqueryObj.find("word");
//遍历所有的word节点，取出单词内容，然后将单词内容添加到弹出框中
//需要清空原来的内容
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","green");
});
//增加鼠标移除事件,取消当前节点的高亮
newDivNode.mouseout(function() {
//取消鼠标移除节点的高亮
$(this).css("background-color","white");
});
//增加鼠标点击事件，可以进行补全
newDivNode.click(function() {
//取出高亮节点的内容
var comTest = $(this).text();
$("#auto").hide();
highlightindex = -1;
//文本框中的内容变成高亮节点的内容
$("#word").val(comTest);
});
});
//如果服务器端有数据返回，则显示弹出框
if(wordNodes.length > 0) {
autoNode.show();
}else {
autoNode.hide();
//弹出框隐藏的同时，高亮节点的值也至成-1
highlightindex = -1;
}
},"xml");
},500);
} else {
autoNode.hide();
highlightindex = -1;
}
}else if(keyCode ==38 || keyCode == 40){
//如果输入的是向上38或向下40键
if(keyCode == 38) {
//向上键
var autoNodes = $("#auto").children("div");
if(highlightindex != -1) {
//如果原来存在高亮节点，则背景颜色改成白色
autoNodes.eq(highlightindex).css("background-color","white");
highlightindex--;
}else {
highlightindex = autoNodes.length -1;
}
if(highlightindex == -1) {
//如果修改索引值以后index变成-1，则将索引值指向最后一个元素
highlightindex = autoNodes.length - 1;
}
// 让现在高亮的内容变成红色
autoNodes.eq(highlightindex).css("background-color","red");
}
if(keyCode == 40) {
//向下键
var autoNodes = $("#auto").children("div");
if(highlightindex != -1) {
//如果原来存在高亮节点，则背景颜色改成白色
autoNodes.eq(highlightindex).css("background-color","white");
}
highlightindex++;
if(highlightindex == autoNodes.length) {
//如果修改索引值以后index变成-1，则将索引值指向最后一个元素
highlightindex = 0;
}
// 让现在高亮的内容变成红色
autoNodes.eq(highlightindex).css("background-color","red");
}
}else if(keyCode == 13) {
//如果输入的是回车
//下来框有高亮内容
if(highlightindex != -1) {
//取出高亮节点的内容
var comTest = $("#auto").hide().children("div").eq(highlightindex).text();
highlightindex = -1;
//文本框中的内容变成高亮节点的内容
$("#word").val(comTest);
}else {
//下拉框没有高亮内容
alert("文本框中的内容["+$("#word").val()+"]被提交了");
$("#auto").hide();
$("#word").get(0).blur();
}
}
});
//给按钮添加事件，表示文本框的内容被提交
$("input[type='button']").click(function() {
alert("文本框中的内容["+$("#word").val()+"]被提交了");
});
})
3 提示数据来源（这里使用的是用jsp生成xml格式数据）：
<%--
ajax自动补全实例
--%>
<!--与传统的视图层不同，这个jsp返回的是xml数据因此contentType的值是text/xml-->
<%@ page contentType="text/xml;charset=UTF-8" language="java" %>
<%
//页面传送的字符串
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>
4 向web.xml文件加入servlet配置信息：
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>AutoComplete</servlet-name>
<servlet-class>service.AutoComplete</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AutoComplete</servlet-name>
<url-pattern>/AutoComplete</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
5 使用http://localhost:8080/AutoComplete/JqueryAutocomplete.html便可以看到输入a时的提示信息，源码放在附件里
分享到：
相关推荐
在IT领域，自动补全提示是一项非常常见的功能，尤其在搜索引擎和各种输入框中，它极大地提升了用户体验。本文将深入探讨如何使用JavaScript实现一个具备模糊搜索功能的自动补全提示输入框，根据提供的标题和描述，...
总的来说，WPF TextBox的自动补全功能是通过监听输入变化、实现匹配算法、动态展示提示信息等一系列步骤来实现的，它结合了事件处理、UI设计和数据操作等多个方面的知识。通过熟练掌握这一技术，开发者可以为WPF应用...
为了提供更好的用户体验，开发者经常需要为TextBox添加自动提示、自动完成和自动补全的功能。这些特性可以帮助用户更快地输入信息，尤其是在处理长文本或者需要从预定义的数据集中选择内容时。 一、TextBox自动提示...
自动补全功能是Eclipse的一大亮点，它能够提供代码提示，减少手动输入，提高编码速度。但有时，由于各种原因，Eclipse的自动补全功能可能出现反应迟钝或完全卡死的情况。以下是一些可能导致该问题的原因及相应的解决...
在STM32CubeIDE中，自动补全功能可以为STM32 HAL库、LL库以及CMSIS库的函数、宏定义等提供智能提示，使得开发者无需记住复杂的API调用，只需键入部分代码，IDE就能提供可能的匹配选项。 STM32CubeIDE的自动补全插件...
plsql中 sql 语句自动补全 如 只输入s 即可自动补全为 select * from 使用方法 下载该文件 并在plsql中 选择 tools-perferences-edit-autoreplaces 点击浏览 选择该文件
"eclipse c_c++自动补全auto activation 自动激活 最新插件"很可能指的是一个更新的、专门为Eclipse C/C++开发者设计的插件，旨在优化自动补全体验，提高激活速度和准确度。这个插件可能包含了最新的代码库，能够...
本文将重点介绍一种强大的自动补全提示组件——Kissy Suggest，它是一个基于JavaScript的开源工具，适用于各种前端项目。 Kissy Suggest是Kissy框架的一部分，Kissy是一个轻量级的前端JavaScript库，旨在简化Web...
"搜索记录和自动补全分开提示demo"是一个典型的搜索功能优化案例，它结合了热门搜索记录和实时输入的自动补全建议，以提高用户体验。下面我们将详细探讨这些知识点。 首先，**搜索记录**是指系统保存用户过去的搜索...
STM32CubeIDE的一大亮点就是其内置的代码生成器和自动补全功能，能够极大地提高开发效率。 标题提到的“STM32CubeIDE代码自动补全插件”是一种增强STM32CubeIDE原有功能的工具，旨在进一步优化编程体验。这个插件是...
STM32CubeIDE的1.15.0版本引入了自动补全插件，这大大提升了开发效率，特别是在处理复杂的嵌入式系统编程时。 自动补全功能是现代编程环境中不可或缺的一部分，它能够帮助开发者在编写代码时快速输入函数、变量、类...
**中文拼写自动补全** 在信息技术领域，中文输入法的拼写自动补全功能是一项重要的用户体验提升技术。它能够帮助用户快速、准确地输入文本，尤其对于输入速度较慢或者不太熟悉汉字输入的用户来说，这个功能尤为重要...
去除eclipse 4.7 自动补全 中空格 = （）
标题“改进版 jquery 仿百度谷歌自动补全输入（支持中文）”涉及到的是一个基于jQuery的前端开发技术，旨在实现类似百度和谷歌搜索框的自动补全功能，而且这一版本特别优化了对中文字符的支持。在网页交互设计中，...
展开“JavaScript” -> “Editor” -> “Content Assist”，在这里你可以调整JavaScript自动补全的详细程度，比如是否显示函数参数提示等。同时，确保“Enabled”选项已被勾选，以启用JavaScript的自动补全功能。 ...
类文件自动补全是指在编写 Java 代码时，Eclipse 可以自动提示类的成员变量和方法。这可以帮助开发者快速编写代码，避免编写错误。要启用类文件自动补全，需要在 Eclipse 中进行如下设置： 1. 打开 Eclipse 菜单栏...
JavaScript文本框下拉自动补全提示是一种常见的交互设计，它极大地提升了用户在输入时的效率和体验。在网页开发中，这种功能常用于搜索框、表单输入等场景，允许用户在输入过程中根据已有的数据集获取匹配的建议，...
Eclipse C/C++ 自动补全的cdt补丁,补全.