Ajax JQuery 实现自动补全解决方案

最新推荐文章于 2022-03-29 03:58:31 发布

yf86810

最新推荐文章于 2022-03-29 03:58:31 发布

阅读量178

点赞数

分类专栏： JAVA 文章标签： Ajax jQuery CSS Servlet 应用服务器 ViewUI

本文链接：https://blog.csdn.net/yf86810/article/details/83733799

版权

JAVA 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

[b]HTML代码：[/b]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>JQuery示例：仿googlesuggest</title>
  <script type="text/javascript" src="jslib/jquery.js"></script>
  <script type="text/javascript" src="jslib/jqueryauto.js"></script>
</head>
<body>
    JQuery示例：仿googlesuggest<input type="text" id="word" onblur="Onblur()"/>
    <input type="button" value="提交" /><br /><br /><br />
    <div id="auto"></div>
</body>
</html>

[b]JS代码 jqueryauto.js：[/b]

//表示当前高亮的节点
var highlightindex = -1;
$(document).ready(function() {
    var wordInput = $("#word");
    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() + 2);

    //给文本框添加键盘按下并弹起的事件
    wordInput.keyup(function(event) {
        //处理文本框中的键盘事件
        var myEvent = event || window.event;
        var keyCode = myEvent.keyCode;
        //如果输入的是字母，应该将文本框中最新的信息发送给服务器
        //如果输入的是退格键或删除键，也应该将文本框中的最新信息发送给服务器
        if((keyCode >= 65 && keyCode<=90) || (keyCode >= 48 && keyCode <= 57) ||(keyCode>=96 && keyCode<=105) || keyCode == 46 || keyCode == 8 || keyCode == 32)
        {
            //1.首先获取文本框中的内容
            var wordText = encodeURIComponent($("#word").val());
            var autoNode = $("#auto");
            if (wordText != "") {
                //2.将文本框中的内容发送给服务器
                $.post("AutoComplete" ,{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");
                              highlightindex = -1;
                          });
                        //增加鼠标点击事件，可以进行补全
                          newDivNode.click(function(){
                              var comText = $(this).text();
                              $("#auto").hide();
                              highlightindex=-1;
                              $("#word").val(comText);
                          });                            
                      });

                    //如果服务器段有数据返回，则显示弹出框
                    if (wordNodes.length > 0) {
                        autoNode.show();
                    } else {
                        autoNode.hide();
                        //弹出框隐藏的同时，高亮节点索引值也制成-1
                        highlightindex = -1;
                    }
                },"xml");
            } else {
                autoNode.hide();
                highlightindex = -1;
            }
        } else if (keyCode == 38 || keyCode == 40) {
            //如果输入的是向上38向下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;
                //文本框中的内容变成高亮节点的内容
                $("#word").val(comText);
            } else {
                //下拉框没有高亮内容
              $("#auto").hide();
                 //让文本框失去焦点
                 $("#word").get(0).blur();
                alert("文本框中的[" + $("#word").val() + "]被提交了");
            }
        }
    });

    //给按钮添加事件，表示文本框中的数据被提交
    $("input[type='button']").click(function() {
        alert("文本框中的[" + $("#word").val() + "]被提交了");
    });
})

//文本框失去焦点隐藏弹出框
function Onblur(){
 if(highlightindex == -1){
  $("#auto").hide();
 }
 }

[b]servlet代码：[/b]package servlet;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;

import java.io.BufferedReader;
import java.io.FileNotFoundException;
import java.io.FileReader;
import java.io.IOException;
import java.net.URLDecoder;
import java.util.ArrayList;

/**
 * Created by IntelliJ IDEA.
 * User: ming
 * Date: 2008-6-14
 * Time: 14:17:00
 * To change this template use File | Settings | File Templates.
 * 接收用户端请求
 */
public class AutoComplete extends HttpServlet{
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //表示页面传过来的字符串，用于和服务器段的单词进行完整匹配
      String word = URLDecoder.decode(request.getParameter("word"), "UTF-8");
         System.out.println(word);
         try {
             FileReader fr= new FileReader("E:\\a.txt");
             //可以根据服务器端不同的字典或者数据库修改。此处仅是示例而已。。。。
             BufferedReader br = new BufferedReader(fr);
             ArrayList qlist = new ArrayList();
             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对象中
             //request.setAttribute("word",word);
             //将请求转发给视图层（注意AJAX中，这个所谓的视图层不返回页面，只返回数据，所以也可以称作使一个数据层）
             request.getRequestDispatcher("wordxml1.jsp").forward(request, response);    

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

    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        doGet(httpServletRequest, httpServletResponse);    //To change body of overridden methods use File | Settings | File Templates.
    }
}

[b]wordXml.jsp代码[/b]

<!-- 与传统应用的视图层不同 ，这个jsp返回的是xml的数据，因此contentType的值是text/xml-->
<%@ page contentType="text/xml;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!--返回xml数据的视图层暂时不做任何逻辑判断，先将所有单词都返回，待前后台应用可以完整的协作之后，再限制返回的内容’-->

<words>
     <c:forEach var="word" items="${words}">
         <word>${word}</word>
     </c:forEach>
</words>

项目要加入jstl标签库