ajax+tomcat实现自动补全效果

最新推荐文章于 2023-01-05 13:37:11 发布

唱跳rap程序猿

最新推荐文章于 2023-01-05 13:37:11 发布

阅读量194

点赞数

分类专栏： javaWeb

本文链接：https://blog.csdn.net/weixin_44261856/article/details/86629812

版权

javaWeb 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述
如图中的效果

INSERT INTO `user` VALUES ('1', '张三');
INSERT INTO `user` VALUES ('2', '李四');
INSERT INTO `user` VALUES ('3', '王五');
INSERT INTO `user` VALUES ('4', '赵六');
INSERT INTO `user` VALUES ('5', '田七');
INSERT INTO `user` VALUES ('6', '孙八');
INSERT INTO `user` VALUES ('7', '张三丰');
INSERT INTO `user` VALUES ('8', '张无忌');
INSERT INTO `user` VALUES ('9', '李寻欢');
INSERT INTO `user` VALUES ('10', '王维');
INSERT INTO `user` VALUES ('11', '李白');
INSERT INTO `user` VALUES ('12', '杜甫');
INSERT INTO `user` VALUES ('13', '李贺');
INSERT INTO `user` VALUES ('14', '李逵');
INSERT INTO `user` VALUES ('15', '宋江');
INSERT INTO `user` VALUES ('16', '王英');
INSERT INTO `user` VALUES ('17', '鲁智深');
INSERT INTO `user` VALUES ('18', '武松');
INSERT INTO `user` VALUES ('19', '张薇');
INSERT INTO `user` VALUES ('20', '张浩');
INSERT INTO `user` VALUES ('21', '刘小轩');
INSERT INTO `user` VALUES ('22', '刘浩宇');
INSERT INTO `user` VALUES ('23', '刘六');

在Tomcat中加入一些数据

public class Dao {
    private JdbcTemplate tem = new JdbcTemplate(DataSourceUtils.getDataSource());

    public List<City> findCity(int pid){
        return tem.query("select * from city where pid = ?",new BeanPropertyRowMapper<>(City.class),pid);
    }
}

Dao中用Jdbc连接数据库,数据源工具类已事先写好

 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String word = request.getParameter("word");
        userService us = new userService();
        List<User> user = us.findUser(word + "%");
        String words = new ObjectMapper().writeValueAsString(user);
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().print(words);
    }

这是servlet的代码,需要注意的是传参的时候加了个%号,用于SQL查询中的通配符,代表匹配任意多个字符,这样可以查找以页面中输入的字开头的数据

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自动完成</title>
    <style type="text/css">
        .content {
            width: 400px;
            margin: 30px auto;
            text-align: center;
        }

        input[type='text'] {
            box-sizing: border-box;
            width: 280px;
            height: 30px;
            font-size: 14px;
            border: 1px solid #38f;
        }

        input[type='button'] {
            width: 100px;
            height: 30px;
            background: #38f;
            border: 0;
            color: #fff;
            font-size: 15px;
        }

        #show {
            box-sizing: border-box;
            position: relative;
            left: 7px;
            font-size: 14px;
            width: 280px;
            border: 1px solid dodgerblue;
            text-align: left;
            border-top: 0;
            /*一开始是隐藏不可见*/
            display: none;
        }

        #show div {
            padding: 4px;
            background-color: white;
        }

        #show div:hover {
            /*鼠标移上去背景变色*/
            background-color: #3388ff;
            color: white;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content">
    <img alt="传智播客" src="img/logo.png"><br/><br/>
    <input type="text" name="word" id="word">
    <input type="button" value="搜索一下">
    <div id="show"></div>
</div>
</body>
<script>
    $(function () {
        $("#word").keyup(function () {
            var word = $(this).val().trim();
            if (word == "") {
                $("#show").css("display", "none");
                return;
            }
            $.get({
                url: "uServlet",
                data: "word=" + word,
                success: function (date) {
                    if (date.length > 0) {
                        var str = "";
                        for (d of date) {
                            str += ("<div>" + d.name + "</div>");
                        }
                        $("#show").html(str);
                        $("#show").css("display", "block");
                    }else{
                        $("#show").css("display", "none");
                    }

                }
            })

        })

        $("#show").on("click","div",function () {
            var text = $(this).text();
            $("#word").val(text);
            $("#show").css("display", "none");
        })
    })
</script>
</html>

这里是HTML代码,首先拿到输入的值,然后用trim()去掉前后的空格,再进行判断,如果为空.就直接隐藏div.

Ps:(div是输入文字后出现的补全框)

$("#show").html(str);

然后用ajax拿到servlet返回的数据,遍历数据添加到div下,这里有个要注意的地方就是需要使用html()方法覆盖原来的内容,否则会出现补全框内的内容越来越多

if (date.length > 0)

对返回的数据需要进行判断,如果返回的数据长度为0,就是没有匹配的内容,就隐藏div

$("#show").on("click","div",function () {
            var text = $(this).text();
            $("#word").val(text);
            $("#show").css("display", "none");
        })

最后用on方法为新增的div动态的绑定click事件,当点击div里面的内容,就将内容中的值赋给输入框,并且隐藏div

唱跳rap程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax+tomcat实现自动补全效果

如图中的效果INSERT INTO `user` VALUES ('1', '张三');INSERT INTO `user` VALUES ('2', '李四');INSERT INTO `user` VALUES ('3', '王五');INSERT INTO `user` VALUES ('4', '赵六');INSERT INTO `user` VALUES ('5', '田七'...
复制链接

扫一扫

专栏目录