（JQuery）搜索时，内容自动补全案例

Hello3q3q

于 2020-12-16 21:22:42 发布

阅读量491

点赞数

分类专栏： Java 文章标签： js jquery html css java

本文链接：https://blog.csdn.net/weixin_45727931/article/details/111248946

版权

Java 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

本文介绍如何实现实时搜索提示功能，包括前端使用jQuery配合AJAX异步获取服务器返回的数据，后端通过Servlet处理GET请求并返回JSON数据。展示了从用户输入、数据库查询到结果展示的完整流程。

摘要由CSDN通过智能技术生成

内容自动补全案例

1. 问题描述

实现如图所示功能，当输入一条信息时，自动提示信息，若点击提示信息，自动将其填充到搜索框中
在这里插入图片描述

2. 问题分析

必须要用异步的方式（ajax，基本用法见博客），如果用同步的方法，一刷新，原来输入的文字信息就被刷新没了
必须设置的是键盘抬起事件，当键盘抬起时触发
本质是一个模糊查询，将用户输入的信息传到服务器，服务器去数据库模糊查询，将查到的结果返回到浏览器
浏览器将收到的查询结果进行处理

3. 数据库准备

见博客中的案例

4. 搜索页面

搜索页面html如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        .content {
            width: 643px;
            margin: 200px auto;
            text-align: center;
        }

        input[type='text'] {
            width: 530px;
            height: 40px;
            font-size: 14px;
        }

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

        .show {
            position: absolute;
            width: 535px;
           /* height: 100px;*/
            border: 1px solid #999;
            border-top: 0;
            display: none;
        }
    </style>
</head>
<body>
<div class="content">

    <input id="keyWord" type="text" name="word">
    <input type="button" value="搜索一下">
    <div id="show" class="show"></div>
</div>
</body>
</html>

注意最后的<div id="show" class="show"></div>这个区域就是用来显示提示信息的

5. 给搜索界面中添加js代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        .content {
            width: 643px;
            margin: 200px auto;
            text-align: center;
        }

        input[type='text'] {
            width: 530px;
            height: 40px;
            font-size: 14px;
        }

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

        .show {
            position: absolute;
            width: 535px;
           /* height: 100px;*/
            border: 1px solid #999;
            border-top: 0;
            display: none;
        }
    </style>

    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">
        function searchWord() {

            var show = $("#show");
            //获取文本框的值，如果用户啥也没输入，或者输入了文本框空格，就不显示提示框
            if(keyWord.trim()==""){
                //div隐藏
                show.hide()
                return;
            }

            //向服务器发生请求,提交关键词，服务器传回来的是一个jason数组
            $.get(
                "/search",
                "keyWord="+keyWord,
                function (data) {
                    //提示区域显示出来
                    show.show();//jQuery函数,标签显示
                    var str="";
                    //data响应的是服务器json数据，本质是数组,数组中的元素是对象,对象的键name
                    //遍历数组
                    $.each(data,function(index,element){
                        str += "<div οnmοuseοver='overFn(this)' οnmοuseοut='outFn(this)' οnclick='clickFn(this)'>"+element.name+"</div>";
                    });
                    //字符串,填充div
                    show.html(str);
                },
                "json"
            );

        }

        //鼠标悬停事件
        function overFn(obj) {
            $(obj).css("background","yellow");
        }

        //鼠标离开事件
        function outFn(obj) {
            $(obj).css("background","")
        }
        //鼠标点击事件
        function clickFn(obj) {
        //鼠标点击提示信息时，将提示信息填到搜索框中
            $("#keyWord").val($(obj).text());
            // 将提示框设置隐藏
            $("#show").hide();

        }
    </script>
</head>
<body>
<div class="content">

    <!--搜索框,绑定键盘弹起事件-->
    <input id="keyWord" type="text" name="word" onkeyup="searchWord()">
    <input type="button" value="搜索一下">
    <!--查询后,补全的数据,填充div中-->
    <div id="show" class="show"></div>
</div>
</body>
</html>

6. web层的Servlet

package web;

import com.fasterxml.jackson.databind.ObjectMapper;
import pojo.User;
import service.UserService;

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 java.io.IOException;
import java.util.List;

@WebServlet(urlPatterns = "/search")
public class SearchServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String keyword = request.getParameter("keyWord");

        // 调用service层方法，传递keyword，返回List集合
        UserService service = new UserService();
        List<User> userList = service.search(keyword);

        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(userList);
        System.out.println(json);
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write(json);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

7. service层代码

package service;

import dao.UserDao;
import pojo.User;

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

public class UserService {
    /**
     * 接收web层传来的keyword
     * 调用dao层方法查询数据
     */
    public List<User> search(String keyWord){
        UserDao userDao = new UserDao();
        List<User> userList = null;
        try {
            userList = userDao.search(keyWord);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return userList;
    }

}

8. Dao层代码

package dao;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import pojo.User;
import utils.C3p0Utils;

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

public class UserDao {
    /**
     * 接收业务层传递的关键词
     * 模糊查询数据表，返回List集合
     */
    public List<User> search(String keyWord) throws SQLException {
        QueryRunner qr = new QueryRunner(C3p0Utils.getDataSource());
        String sql = "select * from user where name like ?";
        List<User> userList = qr.query(sql, new BeanListHandler<User>(User.class), "%" + keyWord + "%");
        return userList;
    } 
}