基于JQuery和DWR的自动补全

最新推荐文章于 2024-09-11 20:28:45 发布

java小强

最新推荐文章于 2024-09-11 20:28:45 发布

阅读量73

点赞数

分类专栏： JS 文章标签： jquery dwr ajax 自动补全 google ViewUI

JS 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

后台我用DWR进行异步数据传递：

代码很简单，就是返回一个数组，如果需求不同可以自己修改：

package org.dwr.re;
/**
 * 测试 返回数组
 * @author 崔素强
 */
public class BackArray {
	public String[] backArr() {
		String[] arr = new String[] { "坚持", "就是", "胜利" };
		return arr;
	}
}

前台记得导入DWR的JS，和JQuery的JS，然后写文本框的输入事件：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">    
    <title>自动补全</title>
    <script type='text/javascript' src='/buquan/dwr/util.js'></script>
    <script type='text/javascript' src='/buquan/dwr/engine.js'></script>
    <script type='text/javascript' src='/buquan/dwr/interface/arr.js'></script>
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript">		
	var highlightindex = -1; //高亮节点
	var timeOutId;
	$(document).ready(function() {	
	var wordInput = $("#keyText"); //文本框值	
    var wordInputOffset = wordInput.offset(); //文本框属性
	//初始时层隐藏,并设置它的样式,位置
    $("#auto").hide().css("border","1px black solid")
    	.css("position","absolute")
        .css("top",wordInputOffset.top + wordInput.height() + 5 + "px")
        .css("left",wordInputOffset.left + "px")
        .width(wordInput.width() + 5);    
	//文本框事件
	$("#keyText").keyup(function(){
        var myEvent = event || window.event;
        var keyCode = myEvent.keyCode; //取得按键的值
		var autoNode = $("#auto");
		//输入字母等的情况，包括回车，delete
		if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) {
			autoNode.html("");			
			var wordText=$("#keyText").val(); //当前文本框值
			if (wordText != ""){
				//将上一次没有完成的请求清除
				clearTimeout(timeOutId);
				//将请求延迟
				timeOutId = setTimeout(function(){
					//使用DWR返回数据，暂时没有设置参数，返回一个字符串数组即可
					arr.backArr(function back(data){
			    		for(i = 0;i < data.length;i++){	
			    			var newDiv = $("<div>").attr("id",i); // 增加标识		    			    			
			    			newDiv.html(data[i]).appendTo(autoNode); //创建新的节点到原DIV元素
			    			//鼠标移入事件
			    			newDiv.mouseover(function(){
			    				if(highlightindex != -1){
			    					$("#auto").children("div").eq(highlightindex)
			    					.css("background-color","white");
			    				}
			    				//增加一个属性
			    				highlightindex = $(this).attr("id");
			    				//当前设为红色
			    				$(this).css("background-color","red");
			    			});
			    			//鼠标移出事件
			    			newDiv.mouseout(function(){
			    				//当前清除颜色
			    				$(this).css("background-color","white");
			    			});
			    			//鼠标单击事件
			    			newDiv.click(function(){
			    				//取出高亮节点的文本内容
				                var comText = $("#auto").hide().children("div").eq(highlightindex).text();
				                highlightindex = -1;
				                //文本框中的内容变成高亮节点的内容
				                $("#keyText").val(comText);
			    			});
			    		}
			    		if (data.length > 0){		    			
			    			autoNode.show();
			    		}else{
			    			autoNode.hide();
			    		}
			    	});
		    	},500); //延迟处理
	    	} else {	    		
		    	autoNode.hide();
	    	}
	    	highlightindex = -1;
    	} else if (keyCode == 38 || keyCode == 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 comText = $("#auto").hide().children("div").eq(highlightindex).text();
                highlightindex = -1;
                //文本框中的内容变成高亮节点的内容
                $("#keyText").val(comText);
            } else {
                //下拉框没有高亮内容
                alert("文本框中的[" + $("#keyText").val() + "]被提交了");
            }
    	}
	});
	});
	</script>	
  </head>  
  <body>
    <input type="text" id="keyText" name="keyText" width="50px" />
    <div id="auto" align="left"></div>
  </body>
</html>

当你输入时，会去后台查询并显示一些数据，你可以使用上下键来操作，回车时自动提交数据！

请您到ITEYE看我的原创：http://cuisuqiang.iteye.com

或支持我的个人博客，地址：http://www.javacui.com

java小强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于JQuery和DWR的自动补全

后台我用DWR进行异步数据传递：代码很简单，就是返回一个数组，如果需求不同可以自己修改：package org.dwr.re;/** * 测试返回数组 * @author 崔素强 */public class BackArray { public String[] backArr() { String[] arr = new String[] { "坚持"...
复制链接

扫一扫

专栏目录