使用ajax完成站内搜索功能（异步搜索功能）

最新推荐文章于 2022-03-30 19:29:05 发布

原创

最新推荐文章于 2022-03-30 19:29:05 发布 · 4.4k 阅读

18 ·

CC 4.0 BY-SA版权

本文介绍如何在用户键盘抬起时获取输入框内容，通过Ajax进行数据库模糊查询，将查询到的商品结果显示在指定区域。实现过程包括前端设置和后台的三层架构：web层（SearchWordServlet.java）、service层（ProductService.java）及dao层（ProductDao.java）。

思路分析：键盘抬起时候获得输入框的内容，根据输入框的内容去数据库中模糊查询，然后将返回的商品返回在showDiv中

1：前台

index.jsp

<div class="form-group" style="position: relative">
    <input id="search" type="text" class="form-control" placeholder="Search" onkeyup="searchWord(this)">
    <div id="showDiv"
         style="display:none;position:absolute;z-index:1000;background:#fff;width:170px;border:1px solid #ccc;">
    </div>
</d