java web在不使用任何插件情况下实现文本框输入自动补全功能

最新推荐文章于 2023-07-01 16:03:38 发布

qq_32444825

最新推荐文章于 2023-07-01 16:03:38 发布

阅读量1.1k

点赞数

分类专栏： web

web 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

java web在不使用任何插件情况下实现文本框输入自动补全功能

2014年07月29日 11:14:12

阅读数：947

前台部分：

 
     [html]  
     view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title>word.html</title>  
      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="this is my page">  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
      
    <script type="text/javascript" src="js/jquery.js"></script>  
    <script type="text/javascript" src="js/auto.js"></script>  
  </head>  
    
  <body>  
   suggest:<input id="word" type="text" />  
   <input type = "button" value="提交" />可以尝试输入大写字母"A、B、T"将有提示  
     
   <div id = "auto"> </div>  
  </body>  
</html>  

JS部分：

 
     [javascript]  
     view plaincopy
$(document).ready(function(){   //一开始加载方法  
    var highlightindex = -1;///高亮显示的变量值(0-n) 初始-1即无任何 子div 被选中  
    var timeout;///服务器交互延迟  
    var wordInput = $("#word"); //输入框节点  
    var wordInputOffset = wordInput.offset(); //获取输入框的属性函数  
    var autoNode = $("#auto");//初始的auto div节点  
  
    autoNode.hide();//隐藏  
    autoNode.css("position","absolute"); //相对于其最接近的一个最有定位设置的父对象（wordInput）进行绝对定位  
    autoNode.css("z-index","99");//处于顶层  
    autoNode.css("cursor","default");//鼠标样式  
    autoNode.css("filter","alpha(opacity=50");//透明度  
    autoNode.css("text-overflow","clip");//内容过多时不显示省略标记(...)，而是简单的裁切   
    autoNode.css("border","1px black solid");//边框  
    autoNode.css("top",wordInputOffset.top+wordInput.height()+4+"px");//设置高 以ie8 作为标准  
    autoNode.css("left",wordInputOffset.left-2+"px").width(wordInput.width()+5);//设置左边与宽  
    //当使用到项目中，会发现弹出框的背景色是透明的，需要这里设置一下  
    //autoNode.css("background-color","red");       //设置弹出框的背景色  
                                          
    wordInput.blur(function()   ///失去焦点时促发  
    {  
        setTimeout(function() //延时200毫秒以便 鼠标的点击事件能执行  
        {  
             autoNode.hide();  
             highlightindex = -1;  
        },200);  
    });   
          
    wordInput.keyup(function(event)//键盘按下  
    {  
        var myEvent = event || window.event;    //不同浏览器选不同事件  
        var keyCode = myEvent.keyCode;//键盘按下的 值  
              
        if(keyCode>=48&&keyCode<=57||keyCode >= 65 && keyCode <= 90 || keyCode==8 || keyCode ==46||keyCode==13||keyCode==32)//是英文 或退格或删除键都进与服务器交互  
        {  
            var textInput = wordInput.val();//获取输入框的值  
            if(textInput != "" ) //输入不为空  
            {  
                clearTimeout(timeout);//清空前一次的倒数时间  
                timeout = setTimeout(function(){ //延迟与服务器交互时间提高效率  
                    $.post("servlet/InputServlet",{text:textInput},function(data) //与服务器交互 采用xml返回格式  
                    {  
                        var jqueryObj = $(data);//获取返回值节点  
                        var wordNodes = jqueryObj.find("word"); //找到返回的所有xml-word节点 <word>...</word> 节点可自己在服务端定义  
                        autoNode.html("");//清空内容防止div里面重复  
          
                        wordNodes.each(function(i)//遍历所有的word节点 变量i从 0-n  
                        {  
                            var wordNode = $(this);//获取当前的word节点   
                            var NewNode = $("<div>").attr("id",i);//新建一个div节点 并给以id属性且等于i值  
                                  
                            NewNode.html(wordNode.text()).appendTo(autoNode);//把word节点的内容赋给div节点 并把div追加到（相当于内容插入） autoNode节点的div  
                     
                            NewNode.hover(//鼠标事件  
                                function()//鼠标移到  
                                {  
                                    if(highlightindex !=-1)  
                                    {   //鼠标键盘一起用时防止同时高亮  
                                        autoNode.children().eq(highlightindex).css("background-color","white");  
                                    }  
                                        highlightindex = $(this).attr("id"); //把id值赋给highlightindex  
                                        $(this).css("background-color","gray");  
                                },  
                                function(){//鼠标移走  
                                    $(this).css("background-color","white");                    
                                }  
                            );  
                            NewNode.click(function()//点击鼠标时  
                            {  
                                var clickNode = $(this); //获取当前鼠标节点  
                                wordInput.val(clickNode.text());//赋值给输入框  
                                autoNode.hide();  
                                highlightindex =-1;  
                                //....此处可以放点击鼠标选定项时触发的函数  
                            });  
                        });  
                        if(wordNodes.length>0) //有返回值才显示  
                        {  
                            autoNode.show();  
                        }  
                        else//返回为空隐藏  
                        {  
                            autoNode.hide();  
                        }  
                    },"xml");//.post里的方法结束  
                },500);//延时方法结束  
            }  
            else//输入为空隐藏div节点autoNode 不与服务器交互  
            {  
                autoNode.hide();  
                highlightindex = -1;  
            }  
        }  
        else if(keyCode ==38 || keyCode ==40)  
        {  
            var autoNodes = autoNode.children();//获取autoNodes div下的所有子节点  
            if(keyCode == 38)//向上  
            {  
                if(highlightindex != -1)//不为-1 原来有节点被选中  
                {  
                    autoNodes.eq(highlightindex).css("background-color","white");//改变原来背景色 白色  
                    highlightindex--; //减一 向上移到  
                }  
                  
                if(highlightindex == -1){ //为-1 即原来值为0到顶端了  
                    highlightindex = autoNodes.length - 1;//直接把变量改为最后一个 (注意长度length是1-n，而highlightindex 0-n）  
                }  
                autoNodes.eq(highlightindex).css("background-color","gray");//改变新选中的div背景色 蓝色  
                wordInput.val(autoNodes.eq(highlightindex).text()); //直接赋值给输入框  
            }  
            if(keyCode == 40)//向下  
            {  
                if(highlightindex!=-1)//不为-1 原来有节点被选中  
                {  
                    autoNodes.eq(highlightindex).css("background-color","white");//改变原来选中div背景色   
                    highlightindex++; //加1 即向下移动  
                }  
              
                if(highlightindex==-1)//为-1及可加   
                    {  
                        highlightindex++;  
                    }  
        
                     if(highlightindex == autoNodes.length)//加1后等于 子div节点长度到达底端    
                {  
                    highlightindex = 0;//把顶端值赋给highlightindex  
                }  
                  
                autoNodes.eq(highlightindex).css("background-color","gray"); //改变背景色  
                wordInput.val(autoNodes.eq(highlightindex).text()); //直接赋值给输入框  
            }  
        }  
        else if(keyCode==13)//回车  
        {  
            autoNode.hide();//隐藏div  
            highlightindex = -1;//高亮变量恢复默认值  
            //....................//可作提交操作    
        }  
    });  
});  

后台部分：

 
     [java]  
     view plaincopy
package servlet;  
  
import java.io.IOException;  
import java.util.ArrayList;  
import java.util.List;  
  
import javax.servlet.ServletException;  
import javax.servlet.http.HttpServlet;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
  
public class InputServlet extends HttpServlet  
{  
    public void doGet(HttpServletRequest request , HttpServletResponse response) throws ServletException, IOException  
    {  
        request.setCharacterEncoding("utf-8");  
        String text = request.getParameter("text");//获取页面发来的text变量  
        System.out.println(text);  
        List<String> word = new ArrayList<String>();  
        List<String> list = new ArrayList<String>();//用集合方式存放提示关键字  实际应该从数据库中取  
        list.add("Google");  
        list.add("NetEase");  
        list.add("Sohu");  
        list.add("Sina");  
        list.add("Sogou");  
        list.add("Baidu");  
        list.add("Tencent");  
        list.add("Taobao");  
        list.add("Tom");  
        list.add("Yahoo");  
        list.add("JavaEye");  
        list.add("Csdn");  
        list.add("Alipay");  
  
        for (int i = 0; i < list.size(); i++)//循环对比提示关键字与输入文本  
        {  
            if (list.get(i).startsWith(text))//判断输入文本是否与关键字文本开头相同  
            {  
                word.add(list.get(i)); //存放到word的集合中  
            }  
        }  
        request.setAttribute("word", word);//放入Request中  
        request.getRequestDispatcher("/wordxml.jsp").forward(request, response);//跳转到wordxml.jsp  
    }  
  
    public void doPost(HttpServletRequest request , HttpServletResponse response) throws ServletException, IOException  
    {  
        doGet(request, response);  
    }  
}  

 资源下载地址：http://download.csdn.net/detail/sunny0703/7690327

qq_32444825

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java web在不使用任何插件情况下实现文本框输入自动补全功能

java web在不使用任何插件情况下实现文本框输入自动补全功能2014年07月29日 11:14:12阅读数：947前台部分：[html] view plain copy&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title...
复制链接

扫一扫