jquery自动提示

3w1h

浏览: 57106 次
性别:
来自: 成都

最近访客更多访客>>

meanlgp

javaoem

chenliqiang

chenquanyi

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Jquery

HTML JavaScript Struts CSS 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>

分享到：