手机端小强原创文章,java小强个人博客站点
当前位置: 首页 >> JS >> 基于JQuery和DWR的自动补全

基于JQuery和DWR的自动补全

15420 JS | 2015-4-13

后台我用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>

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

推荐您阅读更多有关于“ dwr JQUERY 自动补全 ”的文章

上一篇:10款免费而优秀的图表JS插件 下一篇:JavaScript 数组 Array对象增加和删除 元素

猜你喜欢

发表评论:

个人资料
blogger

java小强
没有思考,人生的路会越走越难!

搜索
分类
最新微语
  • 今天同学问我,最近还在写代码吗?我想了想,这个问题怎么回答呢,我好像确实很长时间,虽然写了一些,但是主要内容已经不是写代码了。然后再想想,自己也7年多了,这么多年了,我收获了什么,我的目标到底是什么。眼看就奔三了,人生啊,开启感叹模式。

    2017-03-30 22:52

  • 也许大家都已经注意到了,今年的房价,好多地方都是翻了一番,跟着就是,各地房东开始变相涨租。今年之所以搬走,就是为此,这两天同学也是如此。很多房东只认钱,别谈感情,伤钱。而对于这个城市来说,你怎么定位自己,你真把自己当成她的一份子?你来此为何?将来何去何从?自己掂量清楚。

    2016-12-05 10:03

  • 为什么一直不写了呢?因为当爸爸了,没空了。今年的冬天,有些寒冷,除了这寒冬带来的不适,更有因乐视公司遇到危机,而带来的同事别离。送别同事,看着空旷的工位,心中有些悲凉。临近年关,此时此刻,该怎么做,似乎不再是脑子一热那么简单了。

    2016-11-24 11:28

  • 已经请假,加上国庆,要很长一段时间不在北京了。919加班,搞的现在有点心累,胸闷,身体不适。看来,我要好好休息一下了。这几天有些冷,2016的冬天,一步步来了,各位亲友,记得添衣加粗啊。

    2016-09-23 17:29

  • 现在是真的有秋天的感觉了,晚上也不热了,白天也凉快了。再来点风,那酸爽,就有一种想出去防风的冲动了。不过因为最近广州的事情压着,我也没办法,搞的特别累,以前是天天加班不想有自由,现在是因为有事情了,被限制了自由。加上公司的一些事情,感觉日子特别的无聊。

    2016-08-31 17:39

  • 更多»

最新文章
热门文章
随机文章