JS jquery自动补全

思路：
1 输入字符串，keyup事件，通过输入的字符串去后台取数据
2 Controoler层跳到jsp页面，返回null，拼装自己想要的任何数据，xml，html都可以
3 异步成功方法获取数据，用jquery的方法进行设置
4 形成div在input下进行显示
5 第二次的keyup事件，如果第一次的没有请求完，取消第一次，进行第二次的keyup事件

1 页面

<html:text property="testDTO.tmpText01" styleId="tmpText01" styleClass="must" />
        <div id="autodpt" style="position:absolute; top:25px; left:50px; padding:4px; display:none; z-index:100;OVERFLOW-Y:auto;SCROLLBAR-FACE-COLOR:#ffffff;FONT-SIZE:11pt;PADDING-BOTTOM:0px;SCROLLBAR-HIGHLIGHT-COLOR:#ffffff;OVERFLOW:auto;LETTER-SPACING:1pt;HEIGHT:200px;TEXT-ALIGN:left"></div>

2 js文件

var wordInput = $("#tmpText01");
    var wordInputOffset = wordInput.offset();
//隐藏自动补全框并通过CSS设置补全框的位置大小及样式
     $("#autodpt").hide()
    .css("position","absolute")
    .css("border","1px black solid")
    .css("top",wordInputOffset.top + wordInput.height() + 5 + "px")
    .css("left",wordInputOffset.left + "px")
    .width(wordInput.width() + 2);
     var IfrRef1 = document.getElementById('DivDpt');
     IfrRef1.style.display = "none";
/添加键盘按下并弹起的事件
    wordInput.keyup(function(event){
        //处理文本框中的键盘事件
        var myEvent = event||window.event;
        var keyCode = myEvent.keyCode;
        //如果输入的是字母，退格，delete，空格或者数字键，应该将文本框中的最新信息发送给服务器,其中，空格键和数字键的加入使得输入中文也能支持~~
        if((keyCode >= 65 && keyCode<=90) || (keyCode >= 48 && keyCode <= 57) ||(keyCode>=96 && keyCode<=105) || keyCode == 46 || keyCode == 8 || keyCode == 32){
            
            //获取文本框的内容
            var wordText = $("#tmpText01").val();
            var autoNode = $("#autodpt");
            if(wordText!=""){ //
            //将文本框中的内容发送到服务器端
            //对上次未完成的延时操作进行取消
            clearTimeout(timeoutIdDpt);
//对于服务器端进行交互延迟500ms，避免快速打字造成的频繁请求
            timeoutIdDpt = setTimeout(function(){
                $.post("*.do?method=initInfoList",{word:wordText},function(data){
//将dom对象data转换成JQuery的对象
                var jqueryObj = $(data);
               //先找到所有的word节点
                var wordNodes = jqueryObj.find("word");
                //遍历所有的word节点，取出单词内容将单词内容添加到弹出框中
                autoNode.html('');
wordNodes.each(function(i){
                   //获取单词内容
                    var wordNode = $(this);
                   //新建div节点将单词内容加入到新建的节点中,将新建的节点加入到弹出框的节点中
                    var newDivNode = $("<div>").attr("id",i)
                                               .attr("attr1",wordNode.attr("attr1"))
                                               .attr("attr2",wordNode.attr("attr2"))
                   // autoNode.attr("dd",i+"a");
                    newDivNode.html(wordNode.text()).appendTo(autoNode);
//增加鼠标进入事件，高亮节点;
                    newDivNode.mouseover(function(){
                        if(highlightindexDpt != -1){
                            $("#autodpt").children("div").eq(highlightindexDpt).css("background-color","white");
                        }
                        highlightindexDpt = $(this).attr("id");
                       
                        $(this).css("background-color","yellow");
                    });
                    //增加鼠标移出事件，取消当前高亮节点
                    newDivNode.mouseout(function(){
                        $(this).css("background-color","white");
                    });
                   //增加鼠标点击事件，可以进行补全
                    newDivNode.click(function(){
                        var comText = $(this).text();
                        $("#autodpt").hide();
                        var IfrRef1 = document.getElementById('DivDpt');
                        IfrRef1.style.display = "none";
                        highlightindexDpt=-1;
                        $("#tmpText01").val(comText);
                        $("#node").attr("value",$(this).attr("attr1"));
                     
                                              
                                          });
                });

 //如果服务器端有数据返回，则显示弹出框
if(wordNodes.length>0){
                    autoNode.show();
                    var DivRef = document.getElementById('autodpt');
                    var IfrRef = document.getElementById('DivDpt');
                    IfrRef.style.width = DivRef.offsetWidth;
                    IfrRef.style.height = DivRef.offsetHeight;
                    IfrRef.style.top = DivRef.style.top;
                    IfrRef.style.left = DivRef.style.left;
                    IfrRef.style.zIndex = DivRef.style.zIndex - 1;
                    IfrRef.style.display = "block";
                }else {
                autoNode.hide();
                var IfrRef1 = document.getElementById('DivDpt');
                IfrRef1.style.display = "none";
                highlightindexDpt=-1;
                }
            },"xml");
            },1500);
 }else{
            	  var IfrRef1 = document.getElementById('DivDpt');
                  IfrRef1.style.display = "none";
                  highlightindexDpt=-1;
                autoNode.hide();
                highlightindexDpt=-1;
                }
 } else if(keyCode == 38 || keyCode==40){
            //如果输入的是向上38向下40按键
            if(keyCode == 38){
                //up
                var autoNodes = $("#autodpt").children("div");
                if(highlightindexDpt !=-1)
                {
                    autoNodes.eq(highlightindexDpt).css("background-color","white");
                    highlightindexDpt--;
                }else{
                	highlightindexDpt = autoNodes.length -1;
                }
                if(highlightindexDpt == -1){
                    //如果修改索引值以后index变成-1，则将索引中指向最后一个元素
                	highlightindexDpt = autoNodes.length -1;
                }
               //让现在被高亮的内容变成黄色
                autoNodes.eq(highlightindexDpt).css("background-color","yellow");
            }
            if(keyCode == 40){
                //down
                var autoNodes = $("#autodpt").children("div");
                if(highlightindexDpt !=-1)
                {
                    autoNodes.eq(highlightindexDpt).css("background-color","white");
                }
                highlightindexDpt++;
                if(highlightindexDpt == -1){
                   //如果修改索引值以后index变成-1，则将索引中指向最后一个元素
                	highlightindexDpt = 0;
                }
               //让现在被高亮的内容变成黄色
                autoNodes.eq(highlightindexDpt).css("background-color","yellow");
            }
        }else if(keyCode == 13){
           //如果按下的是回车
            
            //下拉框有高亮的内容
            if(highlightindexDpt !=-1)
            {
                var comText = $("#autodpt").hide().children("div").eq(highlightindexDpt).text();
                var IfrRef1 = document.getElementById('DivDpt');
                IfrRef1.style.display = "none";
                highlightindexDpt=-1;
                $("#DivDpt").val(comText); //将文本框内容改成选中项

             //   $("form:first").submit(); //提交form。若没有这句话，按下回车后，仅仅只改变了文本框里的内容，但是由于form本身就监控了回车按键默认为submit，提交的是文本框改变之前的内容，解决这个问题最简单的方式就是在文本框内容改变以后强制提交form的内容，此时，提交的内容就是选中项。

            }
           //下拉框没有高亮的内容
            else{
                $("#autodpt").hide();
                var IfrRef1 = document.getElementById('DivDpt');
                IfrRef1.style.display = "none";
               //让文本框失去焦点
                $("#tmpText01").get(0).blur();
            }
        }
        
    });

3 java代码

public ActionForward initAjaxForXML(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) {
		try {
			   log.info("Ajax返回XML 异步请求开始！");
			   			   request.setAttribute("attr",new ArrayList());
			   //根据c_code 判断页面的显示情况
			   response.setCharacterEncoding("UTF-8"); 
			   response.setHeader("Cache-Control", "no-cache,must-revalidate"); 
			   response.setHeader("Pragma", "no-cache"); // HTTP 1.0 
			   response.setDateHeader("Expires", 0); // prevents cachin
			   request.getRequestDispatcher("/ajaxResponseHTMLBetween.jsp").forward(request, response);
			   log.info("Ajax返回XML 异步请求结束！");
			   return null;
		}  catch (Exception e) {
			log.error("Ajax返回XML 异常！");
			return null;
		}

4 中间页面 ajaxResponseHTMLBetween.jsp

<%@ page language="java" contentType="text/xml; charset=utf-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<words>
    <c:forEach var="word" items="${attr}">
        <word   attr1="${word.attr1}" attr2="${word.attr2}"  attr3="${word.atrr3}" >${word.attr1}  ${word.attr2}</word>
    </c:forEach>
</words>

评论

1 楼 niuqiang2008 2011-01-13