`

jquery自动提示

阅读更多
<%@ 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

    **jQuery自动提示插件在Eclipse中的安装与使用** 在Web开发中,jQuery是一个非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。为了提高开发效率,开发者通常会使用集成开发环境...

    Eclipse支持jQuery自动提示.doc

    ### Eclipse支持jQuery自动提示 #### 一、简介 在Web前端开发中,使用Eclipse作为集成开发环境(IDE)能够极大地提高工作效率。特别是在处理复杂的JavaScript代码时,利用Eclipse提供的插件可以实现对jQuery等库的...

    jQuery自动提示 jQuery_api_for_dw4插件

    jQuery自动提示插件jQuery_api_for_dw4是专为Dreamweaver 4(dw4)设计的一款增强工具,旨在提升开发者编写jQuery代码的效率和便利性。这款插件通过集成到Dreamweaver环境中,提供了实时代码提示功能,帮助用户在...

    为Dreamweaver写的扩展---jQuery自动提示.

    《Dreamweaver扩展:jQuery自动提示的实现与应用》 在网页开发中,Adobe Dreamweaver作为一款强大的可视化编辑工具,极大地提升了开发效率。然而,对于JavaScript库如jQuery的使用,开发者往往需要频繁查找API文档...

    在VS2008中实现Jquery自动提示

    在Visual Studio 2008(VS2008)中实现jQuery自动提示功能,能够极大地提高开发效率,使得开发者在编写JavaScript代码时能够快速获取jQuery函数和方法的详细信息,减少错误并提升代码质量。这里我们将深入探讨如何在...

    dw cs5jquery自动提示插件

    让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 自动提示插件"是针对Dreamweaver MX 2004的一个增强工具,旨在提高开发人员在使用jQuery时的代码编写体验。自动提示功能意味着在编写代码时,插件会根据上下文提供可能的...

    myeclipse中使用jquery自动提示

    接下来,配置Spket以支持jQuery自动提示: 1. 进入`Window -&gt; Preferences -&gt; Spket -&gt; JavaScript Profiles`。 2. 点击`New`,创建一个新的JavaScript配置文件,命名为"jQuery",然后点击`OK`。 3. 在新创建的...

    jQuery自动提示插件 for DW CS4 和 DW CS5

    jQuery自动提示插件是Web开发中的一个实用工具,尤其对于使用Dreamweaver CS4和CS5作为集成开发环境(IDE)的开发者来说。这个插件能够显著提高开发效率,因为它在编写jQuery代码时提供了自动补全和代码提示功能。...

    Dreamweaver CS3 jQuery 自动提示插件

    要让Dreamweaver支持jQuery自动提示代码功能,方法很简单,下载一个插件—jQuery_api_for_dw3.mxp 在Dreamweaver里依次选择“命令” -&gt; “扩展管理” -&gt; “安装扩展” -&gt; …,就会自动安装了。 成功后重启...

    eclipse和 dreameaver实现jquery自动提示(含安装步骤)

    eclipse和 dreameaver实现jquery自动提示(含安装步骤) eclipse和 dreameaver实现jquery自动提示(含安装步骤) eclipse和 dreameaver实现jquery自动提示(含安装步骤)

    2009.12.28——jquery自动提示

    标题 "2009.12.28——jquery自动提示" 暗示了这篇内容可能涉及到使用jQuery库来实现一种自动提示的功能,可能是类似于输入框中的自动补全或者下拉建议。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件...

    Jquery自动提示插件(类似Google与Baidu)

    **jQuery自动提示插件——构建智能搜索体验** 在网页开发中,用户友好的交互设计是提升用户体验的关键。jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果等任务。其中,jQuery的自动提示...

    jquery 自动提示autocomplete

    jQuery Autocomplete是一款非常流行的JavaScript库,它为网页输入框提供了自动提示功能,极大地提升了用户体验。这个功能在许多网站上被广泛使用,例如搜索框、表单填充等场景。本篇文章将深入探讨jQuery ...

    jquery自动补全例子

    **jQuery自动补全插件详解** 在Web开发中,用户输入常常需要得到实时的提示和建议,以提高交互体验和输入效率。这就是自动补全功能的用途,它可以在用户输入时提供相关的建议列表。jQuery库提供了多种实现自动补全...

    jquery 自动提示

    一、jQuery自动提示功能实现 1. HTML结构:首先,我们需要一个输入框(input)用于用户输入查询内容,以及一个下拉框(ul或者div)用于显示提示信息。例如: ```html &lt;div id="autoSuggest"&gt;&lt;/div&gt; ``` 2. jQuery...

    Jquery1.3.2Spket自动提示包

    对于jQuery的开发者来说,Spket的jQuery自动提示包特别有价值,它可以在编写代码时提供实时的函数、方法和属性提示,使得编码过程更加流畅。 这个“Jquery1.3.2Spket自动提示包”包含了对jQuery 1.3.2版本的全面...

    Spket js htmkl jquery 自动提示

    它提供了代码自动提示和补全功能,极大地提高了开发效率。以下将详细阐述Spket在JavaScript、HTML和jQuery方面的支持及其重要性。 首先,让我们来了解JavaScript。JavaScript是一种广泛用于网页和网络应用的脚本...

    jquery自动提示实现

    本ppt中详细介绍了如何在网页中用jquery来实现自动提示搜索的功能,还附有代码

Global site tag (gtag.js) - Google Analytics