<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="bean" uri="http://struts.apache.org/tags-bean" %>
<%@ taglib prefix="html" uri="http://struts.apache.org/tags-html" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>autoComplete.jsp</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/autoComplete.js"></script>
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript">
var highLightIndex = -1;
$(document).ready( function() {
var text = $("#name");
var textOffset = text.offset();
$('#auto').hide().css({"border":"1px solid red"})
.css({"position": "absolute"})
.css({"top": textOffset.top + text.height() + 5 + "px"})
.css({"left": textOffset.left + "px"})
.css({"width": text.width()});
$('#name').keyup(function(event){
//alert(event);
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
var autoNode = $("#auto");
if(keyCode > 64 && keyCode < 91 || keyCode == 8 || keyCode == 46){
var inContent = $('#name').val();
//文本框内容不为空时执行异步操作
if(inContent != '' && inContent != null){
$.post('AutoCompleteAction.do?actionFlag=autoComplete', '{name:inContent}',
function(data){
var jqueryObj = $(data);
var contentNode = jqueryObj.find("content");//返回的是一个集合
autoNode.empty();//清除原来DIV结点下面的内容
contentNode.each(function(i){
var nodeVal = $(this);
//alert(nodeVal.text());
//alert($("<div>").html(nodeVal.text()));
var newNode = $("<div>").attr("id", contentNode.index($(this)));
//alert(contentNode.index($(this)));
newNode.html(nodeVal.text()).appendTo(autoNode);
//alert($("<div>").html(nodeVal.text()).appendTo(divNode));
//增加鼠标移入移出事件
newNode.mouseover(function(){
if(highLightIndex != -1){
autoNode.find("div").eq(highLightIndex).css({"background-color":"white"});
highLightIndex = $(this).attr("id");
}
newNode.css({"background-color":"red"});
highLightIndex = $(this).attr("id");
});
newNode.mouseout(function(){
newNode.css({"background-color":"white"});
//highLightIndex = $(this).attr("id");
});
newNode.dblclick(function(){
//alert("****");
$("#name").val($(this).text());
autoNode.hide();
});
});
if(contentNode.length > 0){
autoNode.show(); //显示弹出框
}
}, 'xml');
} else {
autoNode.hide();
highLightIndex == -1;
}
} else if(keyCode == 38 || keyCode == 40) {
//按上下键的时候要高亮选择所选内容
var childNode = autoNode.find("div");
if(keyCode == 38){
if(highLightIndex != -1){
childNode.eq(highLightIndex).css({"background-color":"white"});
}
highLightIndex--;
if(highLightIndex == -1) {
highLightIndex = childNode.length - 1;
}
childNode.eq(highLightIndex).css({"background-color":"red"});
}
if(keyCode == 40){
if(highLightIndex != -1){
childNode.eq(highLightIndex).css({"background-color":"white"});
}
highLightIndex++;
if(highLightIndex == childNode.length) {
highLightIndex = 0;
}
childNode.eq(highLightIndex).css({"background-color":"red"});
}
} else if(keyCode == 13){
//将值给文本框 并隐藏提示框
if(highLightIndex != -1) {
//alert(highLightIndex);
//alert(autoNode.children("div").eq(highLightIndex).text());
$("#name").val(autoNode.children("div").eq(highLightIndex).text());
highLightIndex = -1;
autoNode.hide();
} else {
alert("Excute the Action method");
//让文本框失去焦点,避免点击ENTER键时反复弹出提示框
$("#name").get(0).blur();
}
}
});
})
</script>
</head>
<body>
<%--<html:form action="AutoCompleteAction.do" method="post">
<label for="name">NameAutoComplete:</label>
<label for="gender">NameAutoComplete:</label>
<label for="age">NameAutoComplete:</label>
<html:text property="name" size="200" ></html:text>
<html:text property="gender" size="200"></html:text>
<html:text property="age" size="200"></html:text>
</html:form>
--%>
<form action="#" method="post">
<table>
<tr>
<td>NameAutoComplete:</td>
<td><input id="name" type="text" size="50" value="4" name="content"/></td>
</tr>
<tr><td></td><td><div id="auto" style="display: none;">adfdf</div></td></tr>
<tr>
<td>Gender:</td>
<td><input id="gender" type="text" size="50" /></td>
</tr>
<tr>
<td>Age:</td>
<td><input id="age" type="text" size="50" /></td>
</tr>
</table>
</form>
</body>
</html>
分享到:
相关推荐
**jQuery自动提示插件在Eclipse中的安装与使用** 在Web开发中,jQuery是一个非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。为了提高开发效率,开发者通常会使用集成开发环境...
### Eclipse支持jQuery自动提示 #### 一、简介 在Web前端开发中,使用Eclipse作为集成开发环境(IDE)能够极大地提高工作效率。特别是在处理复杂的JavaScript代码时,利用Eclipse提供的插件可以实现对jQuery等库的...
jQuery自动提示插件jQuery_api_for_dw4是专为Dreamweaver 4(dw4)设计的一款增强工具,旨在提升开发者编写jQuery代码的效率和便利性。这款插件通过集成到Dreamweaver环境中,提供了实时代码提示功能,帮助用户在...
《Dreamweaver扩展:jQuery自动提示的实现与应用》 在网页开发中,Adobe Dreamweaver作为一款强大的可视化编辑工具,极大地提升了开发效率。然而,对于JavaScript库如jQuery的使用,开发者往往需要频繁查找API文档...
在Visual Studio 2008(VS2008)中实现jQuery自动提示功能,能够极大地提高开发效率,使得开发者在编写JavaScript代码时能够快速获取jQuery函数和方法的详细信息,减少错误并提升代码质量。这里我们将深入探讨如何在...
让dreamweaver cs5 绿色版也能自动提示jquery代码 1.把shared、Extensions、codehints三个文件夹复制到 WinXP:C:\Documents and Settings\Administrator\Application Data\Adobe\Dreamweaver CS5\zh_...
本资源提供的"Dreamweaver MX 2004 jQuery 自动提示插件"是针对Dreamweaver MX 2004的一个增强工具,旨在提高开发人员在使用jQuery时的代码编写体验。自动提示功能意味着在编写代码时,插件会根据上下文提供可能的...
接下来,配置Spket以支持jQuery自动提示: 1. 进入`Window -> Preferences -> Spket -> JavaScript Profiles`。 2. 点击`New`,创建一个新的JavaScript配置文件,命名为"jQuery",然后点击`OK`。 3. 在新创建的...
jQuery自动提示插件是Web开发中的一个实用工具,尤其对于使用Dreamweaver CS4和CS5作为集成开发环境(IDE)的开发者来说。这个插件能够显著提高开发效率,因为它在编写jQuery代码时提供了自动补全和代码提示功能。...
要让Dreamweaver支持jQuery自动提示代码功能,方法很简单,下载一个插件—jQuery_api_for_dw3.mxp 在Dreamweaver里依次选择“命令” -> “扩展管理” -> “安装扩展” -> …,就会自动安装了。 成功后重启...
eclipse和 dreameaver实现jquery自动提示(含安装步骤) eclipse和 dreameaver实现jquery自动提示(含安装步骤) eclipse和 dreameaver实现jquery自动提示(含安装步骤)
标题 "2009.12.28——jquery自动提示" 暗示了这篇内容可能涉及到使用jQuery库来实现一种自动提示的功能,可能是类似于输入框中的自动补全或者下拉建议。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件...
**jQuery自动提示插件——构建智能搜索体验** 在网页开发中,用户友好的交互设计是提升用户体验的关键。jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果等任务。其中,jQuery的自动提示...
jQuery Autocomplete是一款非常流行的JavaScript库,它为网页输入框提供了自动提示功能,极大地提升了用户体验。这个功能在许多网站上被广泛使用,例如搜索框、表单填充等场景。本篇文章将深入探讨jQuery ...
**jQuery自动补全插件详解** 在Web开发中,用户输入常常需要得到实时的提示和建议,以提高交互体验和输入效率。这就是自动补全功能的用途,它可以在用户输入时提供相关的建议列表。jQuery库提供了多种实现自动补全...
一、jQuery自动提示功能实现 1. HTML结构:首先,我们需要一个输入框(input)用于用户输入查询内容,以及一个下拉框(ul或者div)用于显示提示信息。例如: ```html <div id="autoSuggest"></div> ``` 2. jQuery...
对于jQuery的开发者来说,Spket的jQuery自动提示包特别有价值,它可以在编写代码时提供实时的函数、方法和属性提示,使得编码过程更加流畅。 这个“Jquery1.3.2Spket自动提示包”包含了对jQuery 1.3.2版本的全面...
它提供了代码自动提示和补全功能,极大地提高了开发效率。以下将详细阐述Spket在JavaScript、HTML和jQuery方面的支持及其重要性。 首先,让我们来了解JavaScript。JavaScript是一种广泛用于网页和网络应用的脚本...
本ppt中详细介绍了如何在网页中用jquery来实现自动提示搜索的功能,还附有代码