js文件:
//var autoNode = $("#auto")是错误的,因为在外边只能声明变量,不能初始化变量
//因为即使初始化了变量也是不好使的
var autoNode;
var wordNode; //文本框
var autoChildNodes;
var highlightindex = -1;//文本框高亮显示的元素的索引,-1表示没有高亮元素,0则表示第一元素高亮,1表示第二个元素高亮,以此类推
//设置成-1是因为在数组列表div中,第一个元素索引是0
$(document).ready(function(){
wordNode = $("#word");
autoNode = $("#auto");
autoNode.hide();
// css("border","1px black solid");
// .css("position","absolute")
// .css("top",offset.height + wordNode.height)
// .css("left",offset.left)
// .css("height",offset.height);;
//处理文本框中的键盘事件
$("#word").keyup(function(event){
//判断用户按下的是哪个键
var myEvent = event || window.event;
var keycode = myEvent.keyCode;
//判断用户按下的键是否是小写 “a” 到 大写 "Z"
if(keycode >= 65 && keycode <= 90 || keycode == 8 || keycode == 46)//8,46是del键和backspace键,也要向服务器发送数据
{
//1.首先获取id为word的文本框中的内容
var wordText = $("#word").val();
if(wordText != ""){
//2.向服务器发送数据,并接受返回数据,对之进行处理
$.post("AutoComplete",{word:wordText},function(data){
//在处理新接受的数据时,把上一次的内容要清空
autoNode.html("");
//3.1将dom对象转化为jquery对象
var jqueryObj = $(data);
//3.2找到所有的word节点
var wordNodes = jqueryObj.find("word");
//3.3遍历所有的word节点,取出单词内容,并把每个节点追加到id为auto的div中
wordNodes.each(function(i){
//4.1取出单词内容
var text = $(this).text();
//4.2新创建一个div节点,并设置节点的内容
var divNode = $("<div>").attr("id",i);
divNode.html(text);
//4.3把新建的div节点追加到对话框中
divNode.appendTo(autoNode);
//找到所有符合条件的auto节点的<div>子节点
autoChildNodes = $("#auto").children("div");
//鼠标进入事件
divNode.mouseover(function(){
if(highlightindex != -1)
{ autoChildNodes.eq(highlightindex).css("background","white");
}
$(this).css("background","red");
highlightindex = i;
});
//鼠标滑出事件
divNode.mouseout(function(){
$(this).css("background","white");
highlightindex = -1;
});
//鼠标点击事件,是click函数,而不是onclick函数
divNode.click(function(){
var clicktext = $(this).html();
wordNode.val(clicktext);
autoNode.hide();
highlightindex = -1;
alert("数据" + clicktext +"被发送!");
});
});
var offset = $("#word").offset();
autoNode.show()
.css("border","1px black solid")
.css("position","absolute")
.css("top",offset.top + wordNode.height()+4)
.css("left",offset.left)
.css("width",wordNode.width()+2);
},"xml");
}else{
autoNode.hide();
//对话在关闭的时候就要恢复highlightindex的值为默认值-1
highlightindex = -1;
}
}else if(keycode == 38 || keycode == 40 ){ //判断用户按下的是否是向上键(38),还是向下键(40)
if(keycode == 38)
{//用户按的是向上的键头
if(highlightindex == -1)
{
highlightindex = autoChildNodes.length-1;
}else{
autoChildNodes.eq(highlightindex).css("background","white");
if(highlightindex == 0)
{
autoChildNodes.eq(highlightindex).css("background","white");
highlightindex= autoChildNodes.length-1
}
else
{
highlightindex--;
}
}
autoChildNodes.eq(highlightindex).css("background","red");
}
else if(keycode == 40)
{//用户按的是向下的键头
if(highlightindex == autoChildNodes.length-1)
{
autoChildNodes.eq(highlightindex).css("background","white")
highlightindex = 0;
}else{
autoChildNodes.eq(highlightindex).css("background","white");
highlightindex++;
}
autoChildNodes.eq(highlightindex).css("background","red");
}
}
else if(keycode == 13)
{//用户按下的是回车键
//下拉框有高亮内容
if(highlightindex != -1)
{
var text = autoChildNodes.eq(highlightindex).html();
wordNode.val(text);
autoNode.hide();
//对话在关闭的时候就要恢复highlightindex的值为默认值-1
highlightindex = -1;
alert("数据" + text +"被发送!" );
}
else
{
alert("数据" + wordNode.val()+"被发送!" );
autoNode.hide();
//对话在关闭的时候就要恢复highlightindex的值为默认值-1
highlightindex = -1;
}
//下拉框没有高亮内容
}
});
//给按钮添加事件,因为button没有id属性,所以可以
// 通过$("input[type='button']")的方法来访问到该节点
$("input[type='button']").click(function(){
alert("数据"+ $("#word").val()+"被提交!");
});
});
servlet文件:
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
/**
* Created by IntelliJ IDEA.
* User: lucky
* Date: 2009-8-19
* Time: 13:51:46
* To change this template use File | Settings | File Templates.
*/
public class AutoComplete extends HttpServlet{
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doPost(httpServletRequest, httpServletResponse);
}
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
String word = httpServletRequest.getParameter("word");
//???将字符床保存在request对象中
httpServletRequest.setAttribute("word",word);
//将请求转发给视图层,(注意在Ajax中,视图层并不返回页面,只返回数据,所以也可称为数据层)
httpServletRequest.getRequestDispatcher("wordxml.jsp")
.forward(httpServletRequest, httpServletResponse);
}
}
word.jsp数据文件:
<%--
Created by IntelliJ IDEA.
User: lucky
Date: 2009-8-19
Time: 14:01:13
To change this template use File | Settings | File Templates.
--%>
<!-- 因为是数据层,所以这里contentType的类型是text/xml-->
<%@ page contentType="text/xml;charset=UTF-8" language="java" %>
<%
String word = request.getParameter("word");
%>
<words>
<%
if("absolute".startsWith(word)){
%>
<word>absolute</word>
<%
}
%>
<%
if("abstarct".startsWith(word)){
%>
<word>abstarct</word>
<%
}
%>
<%
if("anyone".startsWith(word)){
%>
<word>anyone</word>
<%
}
%>
<%
if("anything".startsWith(word)){
%>
<word>anything</word>
<%
}
%>
<%
if("anywhere".startsWith(word)){
%>
<word>anywhere</word>
<%
}
%>
<%
if("brank".startsWith(word)){
%>
<word>brank</word>
<%
}
%>
<%
if("break".startsWith(word)){
%>
<word>break</word>
<%
}
%>
<%
if("blank".startsWith(word)){
%>
<word>blank</word>
<%
}
%>
</words>
html文件:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>自动补全实例</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryauto.js"></script>
</head>
<body>
<input type="text" id="word"/>
<input type="button" value="提交"/><br/>
<div id="auto"></div>
</body>
</html>
分享到:
相关推荐
python入门-30.寻找列表中只出现一次的数字——寻找单身狗.py
linux优化笔记,配套视频:https://www.bilibili.com/list/474327672?sid=4496133&spm_id_from=333.999.0.0&desc=1
知识付费系统-直播+讲师入驻+课程售卖+商城系统-v2.1.9版本搭建以及资源分享下载,CRMEB知识付费分销与直播营销系统是由西安众邦科技自主开发的一款在线教育平台,该系统不仅拥有独立的知识产权,还采用了先进的ThinkPhp5.0框架和Vue前端技术栈,集成了在线直播教学及课程分销等多种功能,旨在为用户提供全方位的学习体验,默认解压密码youyacaocom
美妆神域-JAVA-基于springBoot美妆神域设计与实现
原生js制作Google粘土logo动画涂鸦代码.zip
golin 扫描工具使用, 检查系统漏洞、web程序漏洞
原生态纯js图片网格鼠标悬停放大显示特效代码下载.zip
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手
去水印web端独立版web
原生js制作左侧浮动可折叠在线客服代码.zip
Chrome 谷歌浏览器下载
全新完整版H5商城系统源码 自己花钱买的,亲测可用,需要自行下载 H5商城系统设置是实现商城基本功能的核心部分,涵盖了从网站配置、短信和支付配置,到商品、工单、订单、分站和提现管理等多个模块的设置。以下是详细的设置指南,帮助您快速上手并高效管理商城系统。 测试环境:Nginx+PHP7.0+MySQL5.6 1. 网站配置 设置商城名称、LOGO、标题、联系方式和SEO关键词等,确保商城专业和易于搜索。 2. 短信配置 配置短信接口和模板,用于发送订单通知、验证码等,提升用户体验。 3. 支付接口配置 配置微信、支付宝等支付接口,填写API密钥和回调地址,确保支付流畅。 4. 商品分类管理 对商品进行分类和排序,设置分类名称和图标,便于用户查找商品。 5. 商品管理 添加和管理商品信息、规格、图片等,确保商品信息准确丰富。 6. 工单管理 查看和回复用户工单,记录售后问题,提升用户服务质量。 7. 订单管理 查看订单详情,更新订单状态,支持批量导出,方便订单跟踪。 8. 分站管理 创建不同区域分站,设置权限,统一管理各区域市场。 9. 提现管理
apk安装包
原生js选项卡插件自定义图片滑动选项卡切换.zip
宗教信息佛教佛寺寺庙庵堂相关数据集提供了全国各个地区省市县各个佛教寺庙的详细信息。这些数据不仅包括寺庙的名称和负责人姓名,还涵盖了所属省份、地级市、区县、具体地址、建立日期以及支派类别等关键信息。该数据集整理了超过3万条样本,为研究中国佛教寺庙的分布、历史和文化提供了丰富的第一手资料。这些信息有助于了解佛教在中国的传播和发展,以及寺庙在社会和文化中的作用。数据的整理和提供,对于宗教学、社会学、历史学和文化研究等领域的学者来说,是一个宝贵的资源。
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手
简单的 Python 版本管理pyenvpyenv 可让您轻松在多个 Python 版本之间切换。它简单、不引人注目,并遵循 UNIX 传统,即使用单一用途的工具来做好一件事。该项目由rbenv和 ruby-build分叉而来,并针对 Python 进行了修改。pyenv 的作用是什么......允许您根据每个用户更改全局 Python 版本。为每个项目的 Python 版本提供支持。允许您使用环境变量覆盖 Python 版本。一次搜索多个 Python 版本的命令。这可能有助于使用tox跨 Python 版本进行测试。与 pythonbrew 和 pythonz 相比,pyenv没有……依赖于Python本身。pyenv由纯shell脚本制作。不存在Python的引导问题。需要加载到你的 shell 中。相反,pyenv 的 shim 方法通过向你的 中添加目录来工作PATH。管理虚拟环境。当然,你可以自己创建虚拟环境 ,或者使用pyenv-virtualenv 来自动化该过程。目录安装获取 PyenvLinux/UNIX自动安装程序基本
Notepad-v2.20工具,是替代Notepad++的首选工具
原生js随机图片拖拽排序代码.zip
更快、更好、更稳定的Redis桌面(GUI)管理客户端,兼容Windows、Mac、Linux,性能出众,轻松加载海量键值