web文本框之内容提示

　　今天做的是一个内容补全的功能。实现思路如下：

 

 主要的界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容自动补全</title>
</head>
<body>
    <div>
        <input type="text" id="username" placeholder="请输入要搜索的内容">
        <input type="button" value="搜索">
        <div id="show"></div>
    </div>
</body>
<script src="./js/jquery.min.js"></script>
<script>
    $().ready(function () {
        $("#username").keyup(function () {
            $("#show").empty();
            var username = $("#username").val();
            //alert(username);
            if (username.trim()==""){
                return;
            }else{
                $.post("MessageServlet?method=buchong",{"username":username},function (data) {
                    //alert(data);
                    $(data).each(function (index,element) {
                        var username = element.username;
                        var $div = $("<div onmouseover='over(this)'  onmouseout='out(this)' onmousedown='down(this)' >"+username+"</div>");
                        $("#show").append($div).show();
                    });
                },"json");
            }


        });


    });

    function over(obj) {
        $(obj).css("backgroundColor","pink");
    }

    function out(obj) {
        $(obj).css("backgroundColor","white");
    }
    function down(obj) {
        $("#username").val($(obj).html());
       // alert($(obj).html());
        $("#show").empty();
    }

</script>
</html>

Servlet：

package Servlet;

import Service.JsonUtils;
import Service.MessageService;
import User.userinfo;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.json.JsonMapper;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;


import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;



@WebServlet("/MessageServlet")
public class MessageServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;
    
    
    /**
     * 方法选择
     */
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        String method = req.getParameter("method");

        if ("register".equals(method)) {
            try {
                register(req, resp);
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }else if ("buchong".equals(method)){
            try {
                buchong(req, resp);
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        
        
    }


    // 注册检验用户名是否已经被注册。
    private void register(HttpServletRequest req, HttpServletResponse resp) throws IOException, ServletException, SQLException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        // 获取数据
        String username = req.getParameter("username");
        String sql = "select * from user where username = '"+username+"'";
        System.out.println(sql);
        System.out.println(username);
        boolean data = MessageService.login(sql);
        resp.getWriter().println(data);
        
    }
    //内容自动补全
    private void buchong(HttpServletRequest req, HttpServletResponse resp) throws IOException, ServletException, SQLException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        // 获取数据
        String username = req.getParameter("username");
        String sql = "select * from user where username like '%"+username+"%'";
        System.out.println(sql);
        List<userinfo> lst = MessageService.getinfo(sql);
        System.out.println(lst);
        ObjectMapper om = new ObjectMapper();
        String json = om.writeValueAsString(lst);
        resp.getWriter().println(json);

    }

}

 

posted on 2021-02-26 16:55  沫戏回首  阅读(233)  评论(0)  编辑  收藏  举报

导航