`

转：JQuery Ajax 仿google suggest 自动补全功能 支持中文（jsp / Servlet）

GoogleJSPServletAjaxjQuery 
阅读更多

本文转自：JQuery Ajax 仿google suggest 自动补全功能 支持中文（jsp / Servlet）

已修复bug、原因及解决方案：
1、自动补全提示框背景透明，导致与其后面的字重叠，最简单的办法，就是为<div>设置背景颜色。
2、当把文本框中的字删完了依然会弹出提示，解决方案，见代码。
3、当用户按回车选择自动补全提示框中高亮的条目时，同时也将文本框所在的form提交，但是提交的却并不是选中的条目而是之前在文本框中的文本。 解决方案，在回车事件监控后面加上$("form:first").submit();具体见代码。


网页：
<head>
……………………
     <script language="javascript" type="text/javascript" src="jquery.js"></script>
     <script language="javascript" type="text/javascript" src="jqueryauto.js"></script>
</head>

<body>
   JQueryAutoComplete <input type="text" id="word" />
     <input type="button" value="submit" /><br>
    <div id="auto"></div>
</body>
重头戏在这，感慨一句，万能的刀勒符号啊！！
JavaScript：jqueryauto.js
//表示当前高亮的节点
var highlightindex = -1;
var timeoutId;
$(document).ready(function(){
     var wordInput = $("#word");
     var wordInputOffset = wordInput.offset();
    
    //隐藏自动补全框并通过CSS设置补全框的位置大小及样式
     $("#auto").hide().css("border","1px black solid").css("position","relative").css("background-color","white")
     .css("top",wordInputOffset.top+wordInput.height()+ 5 +"px")
     .css("left",wordInputOffset.left).width(wordInput.width() + 2); //此处可根据自己的网页布局以及页面元素大小调整。
    
    //添加键盘按下并弹起的事件
     wordInput.keyup(function(event){
        //处理文本框中的键盘事件
         var myEvent = event||window.event;
         var keyCode = myEvent.keyCode;
       //如果输入的是字母，退格，delete，空格或者数字键，应该将文本框中的最新信息发送给服务器,其中，空格键和数字键的加入使得输入中文也能支持~~
         if((keyCode &gt;= 65 && keyCode<=90) || (keyCode >= 48 && keyCode <= 57) ||(keyCode>=96 && keyCode<=105) || keyCode == 46 || keyCode == 8 || keyCode == 32){
            
            //获取文本框的内容
             var wordText = $("#word").val();
             var autoNode = $("#auto");
             if(wordText!=""){//2009.6.7 UPDATE：之前在这加上了退格与delete的keyCode的判断，实际上是没有必要的。
           //将文本框中的内容发送到服务器端
             //对上次未完成的延时操作进行取消
             clearTimeout(timeoutId);
           //对于服务器端进行交互延迟500ms，避免快速打字造成的频繁请求
             timeoutId = setTimeout(function(){
                 $.post("AutoCompleteServlet",{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);
                     newDivNode.html(wordNode.text()).appendTo(autoNode);
                    
                   //增加鼠标进入事件，高亮节点;
                     newDivNode.mouseover(function(){
                         if(highlightindex != -1){
                             $("#auto").children("div").eq(highlightindex).css("background-color","white");
                         }
                         highlightindex = $(this).attr("id");
                         $(this).css("background-color","yellow");
                     });
                    //增加鼠标移出事件，取消当前高亮节点
                     newDivNode.mouseout(function(){
                         $(this).css("background-color","white");
                     });
                   //增加鼠标点击事件，可以进行补全
                     newDivNode.click(function(){
                         var comText = $(this).text();
                         $("#auto").hide();
                         highlightindex=-1;
                         $("#word").val(comText);
                    
                    
                     });
                    
                    
                 });
               //如果服务器端有数据返回，则显示弹出框
                 if(wordNodes.length&gt;0){
                     autoNode.show();
                 }else {
                 autoNode.hide();
                 highlightindex=-1;
                 }
             },"xml");
             },500);
            
             }else{
                 autoNode.hide();
                 highlightindex=-1;
                 }
         } else if(keyCode == 38 || keyCode==40){
           //如果输入的是向上38向下40按键
             if(keyCode == 38){
                 //up
                 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","yellow");
             }
             if(keyCode == 40){
                 //down
                 var autoNodes = $("#auto").children("div");
                 if(highlightindex !=-1)
                 {
                     autoNodes.eq(highlightindex).css("background-color","white");
                 }
                 highlightindex++;
                 if(highlightindex == -1){
                   //如果修改索引值以后index变成-1，则将索引中指向最后一个元素
                     highlightindex = 0;
                 }
               //让现在被高亮的内容变成黄色
                 autoNodes.eq(highlightindex).css("background-color","yellow");
             }
            
         }else if(keyCode == 13){
           //如果按下的是回车
            
             //下拉框有高亮的内容
             if(highlightindex !=-1)
             {
                 var comText = $("#auto").hide().children("div").eq(highlightindex).text();
                 highlightindex=-1;
                 $("#word").val(comText); //将文本框内容改成选中项
                 $("form:first").submit(); //提交form。若没有这句话，按下回车后，仅仅只改变了文本框里的内容，但是由于form本身就监控了回车按键默认为submit，提交的是文本框改变之前的内容，解决这个问题最简单的方式就是在文本框内容改变以后强制提交form的内容，此时，提交的内容就是选中项。

             }
           //下拉框没有高亮的内容
             else{
                
                 $("#auto").hide();
               //让文本框失去焦点
                 $("#word").get(0).blur();
             }
         }
        
     });
    
    
})

Servlet的doGet方法代码：
             request.setCharacterEncoding("UTF-8");
             String word = request.getParameter("word");
             //String word = new String(request.getParameter("word").getBytes("ISO-8859-1"),"UTF-8");
             System.out.println(word);
             try {
                 FileReader fr= new FileReader("D:\\study\\javaworkspace\\googleSuggestTest\\src\\wordbase.dic");
//可以根据服务器端不同的字典或者数据库修改。此处仅是示例而已。。。。
                 BufferedReader br = new BufferedReader(fr);
                 ArrayList<String> qlist = new ArrayList<String>();
                 String row;
                 while((row=br.readLine())!=null)
                 {
                     if(row.startsWith(word))
                     {
                         qlist.add(row);
                         if(qlist.size()==10)
                         {
                             break;
                         }
                     }
                 }
                 fr.close();
                 request.setAttribute("words", qlist);
                 request.setAttribute("word",word);
                 request.getRequestDispatcher("wordxml.jsp").forward(request, response);

                
                
             } catch (FileNotFoundException e) {
                 // TODO Auto-generated catch block
                 e.printStackTrace();
             } catch (IOException e) {
                 // TODO Auto-generated catch block
                 e.printStackTrace();
             }

wordxml.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="${words}">
         <word>${word}</word>
     </c:forEach>
</words>

大致的主要流程就是JavaScript获取文本框内的鼠标事件，将内容发送至服务器端，服务器端根据关键字查询获得数据后以xml形式返回给客户端，处理以后通过css来控制<div>的显示，最终完成自动补全功能。
分享到：
| 判断JS键盘事件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics