前端通过模糊搜索不需要搜索按钮在搜索框输入数据模糊搜索显示数据库中的数据前端用thyme leaf后端用Spring boot +j pa

1. 前端实现模糊搜索：

在前端页面中添加一个文本框用于输入搜索关键词，使用jQuery监听文本框内容变化事件，通过Ajax向后端发送请求，获取符合搜索关键词的数据，并将数据展示在页面上。

HTML代码：

<input type="text" id="searchInput" placeholder="请输入搜索关键词">
<div id="searchResult"></div>

jQuery代码：

$(function() {
  $('#searchInput').on('input', function() {
    var searchKeyword = $(this).val();
    $.ajax({
      url: '/search',
      type: 'GET',
      data: {keyword: searchKeyword},
      success: function(result) {
        // 展示搜索结果
        $('#searchResult').html(result);
      }
    });
  });
});

2. 后端实现模糊搜索：

在后端控制器中添加一个处理搜索请求的方法，使用Spring Data JPA通过查询语句获取符合搜索关键词的数据，并返回给前端。

Java代码：

@RequestMapping(value = "/search")
@ResponseBody
public String search(@RequestParam("keyword") String keyword) {
  List<Data> result = dataRepository.findByKeyword(keyword);
  // 将查询结果转换为HTML格式
  String htmlResult = "";
  for (Data data : result) {
    htmlResult += "<div>" + data.getContent() + "</div>";
  }
  return htmlResult;
}

使用Spring Data JPA实现模糊搜索：

在数据仓库中添加一个方法，使用@Query注解指定查询语句，其中使用LIKE关键词实现模糊匹配。

Java代码：

public interface DataRepository extends JpaRepository<Data, Long> {
  @Query("SELECT d FROM Data d WHERE d.content LIKE %:keyword%")
  List<Data> findByKeyword(@Param("keyword") String keyword);
}

注：Data为实体类，content为要搜索的字段