Ajax&Json实现百度搜索提示和自动补全功能

最新推荐文章于 2023-09-27 22:23:44 发布

皇正经

最新推荐文章于 2023-09-27 22:23:44 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： java 数据库 mysql

本文链接：https://blog.youkuaiyun.com/huangluyang123/article/details/121602336

本文介绍了如何使用自建数据库和 Dao 类来实现在输入搜索内容时的自动提示功能，包括 KeyWordDao 的关键操作和前端 HTML 页面的交互设计。通过查询关键字并显示相关结果，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能需求：

1、在输入搜索内容是，根据所输入的内容提示

2、提示内容，可选中并自动补全到搜索框

代码实现：

数据库

自建数据库，以搜索名字为例：

Dao类:

BaseDao

package com.offcn.dao;

import com.mchange.v2.c3p0.ComboPooledDataSource;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;

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

public class BaseDao<T> {
    static ComboPooledDataSource ds = null;
    static QueryRunner qr = null;
    static{
        ds = new ComboPooledDataSource();//创建c3p0的连接池对象
        qr = new QueryRunner(ds);
    }
    //封装增删改方法
    public int update(String sql,Object...params){
        try {
            return qr.update(sql,params);
        } catch (SQLException e) {
            e.printStackTrace();
            throw new RuntimeException();
        }
    }
    //单行查询
    public  T queryOne(String sql,Class<T> clazz,Object... params){
        try {
            return qr.query(sql,new BeanHandler<>(clazz),params);
        } catch (SQLException e) {
            e.printStackTrace();
            throw new RuntimeException();
        }
    }
    //多行查询
    public List<T> queryMore(String sql, Class<T> clazz, Object...params){
        try {
            return qr.query(sql,new BeanListHandler<>(clazz),params);
        } catch (SQLException e) {
            e.printStackTrace();
            throw new RuntimeException();
        }
    }
    //聚合查询
    public Number queryScar(String sql,Object...params){
        try {
            return qr.query(sql,new ScalarHandler<Number>(),params);
        } catch (SQLException e) {
            e.printStackTrace();
            throw new RuntimeException();
        }
    }

}

KeyWordDao

package com.offcn.dao;

import com.offcn.entity.KeyWord;

import java.util.List;

public class KeyWordDao extends BaseDao<KeyWord> {
    public List<KeyWord> seKey(String name){
        String sql = "select * from sou where sou like '%"+name+"%'";
        return queryMore(sql,KeyWord.class);
    }
}

entity类

KeyWord

package com.offcn.entity;

public class KeyWord {
    private int id;
    private String sou;

    public KeyWord() {
    }

    public KeyWord(int id, String sou) {
        this.id = id;
        this.sou = sou;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getSou() {
        return sou;
    }

    public void setSou(String sou) {
        this.sou = sou;
    }

    @Override
    public String toString() {
        return "KeyWord{" +
                "id=" + id +
                ", sou='" + sou + '\'' +
                '}';
    }
}

servlet类

KeyServlet

package com.offcn.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.offcn.dao.KeyWordDao;
import com.offcn.entity.KeyWord;

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("/keyword")
public class KeyServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        String name = req.getParameter("name");
        KeyWordDao kd = new KeyWordDao();
        List<KeyWord> ks = kd.seKey(name);
        if(ks != null&&ks.size()>0){
            ObjectMapper om = new ObjectMapper();
            String s = om.writeValueAsString(ks);
            resp.getWriter().println(s);
        }

    }
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #box {
            display: inline-block;
        }

        #search {
            width: 545px;
            height: 42px;
            border-color: #4E6EF2;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            float: left;
        }

        #btn {
            width: 108px;
            height: 46px;
            background-color: #4e6ef2;
            color: #fff;
            border: none;
            font-size: 17px;
            font-weight: 400;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            float: left;
        }

        #show {
            width: 545px;
            border: 1px solid #4e6ef2;
            position: relative;
            left: -55px;
            text-align: left;
        }
        li:hover{
            background-color: rgba(74, 79, 112, 0.4);
        }
    </style>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            $("#search").bind('input porpertychange', function () {
                var word = $(this).val();
                if (word != "") {
                    $.ajax({
                        url: "keyword",
                        data: {"name": word},
                        type: "post",
                        dataType: "json",
                        success: function (obj) {
                            var htmlStr = "";
                            for (var i = 0; i < obj.length; i++) {
                                htmlStr += "<li style='list-style: none' onclick='demo(this)'>" + obj[i].sou + "</li>";
                            }
                            $("#show").html(htmlStr).show();
                        }
                    })
                } else {
                    $("#show").hide();
                }

            })

        })
        function demo(dom) {
            $("#search").val(dom.innerText);
        }
    </script>
</head>
<body>
<center>
    <img alt="" width="310" height="150" src="img/baidu.png"><br/>
    <div id="box">
        <input id="search" type="text" name="search"/>
        <button id="btn">百度一下</button>
    </div>
    <div id="show" style="display: none">

    </div>
</center>
</body>
</html>