(JQuery)搜索时,内容自动补全案例

本文介绍如何实现实时搜索提示功能,包括前端使用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;
    } 
}

9. 运行效果

  • 搜索界面:
    在这里插入图片描述
  • 搜索时,自动提醒:
    在这里插入图片描述
  • 鼠标放在提示框并移动时,被指的那一行背景色改变:
    在这里插入图片描述
  • 点击其中某条提示信息,会自动填入搜索框内,并且提示框消失,下图示例的时点击"李寻欢"时的情况:
    在这里插入图片描述
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值