前端通过模糊搜索显示数据库中的数据前端用thyme leaf后端用Spring boot +j pa

以下是前端通过模糊搜索显示数据库中的数据的步骤：

1. 在前端页面上添加一个搜索框和一个搜索按钮。

2. 当用户点击搜索按钮时，前端会将搜索框中的关键词发送给后端。

3. 后端接收到请求后，使用JPA查询数据库中的数据，并将结果返回给前端。

4. 前端接收到后端返回的数据后，使用Thymeleaf将数据展示在页面上。

5. 在查询数据时，可以使用模糊查询来匹配用户输入的关键词。

以下是一个简单的示例代码：

前端页面：

<form>
  <input type="text" id="keyword" name="keyword">
  <button type="button" onclick="search()">Search</button>
</form>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody id="result">
  </tbody>
</table>

JavaScript代码：

function search() {
  var keyword = $("#keyword").val();
  $.ajax({
    url: "/search",
    type: "GET",
    data: { keyword: keyword },
    success: function(data) {
      var result = $("#result");
      result.empty();
      for (var i = 0; i < data.length; i++) {
        var row = "<tr><td>" + data[i].id + "</td><td>" + data[i].name + "</td><td>" + data[i].description + "</td></tr>";
        result.append(row);
      }
    }
  });
}

后端代码：

@RestController
public class SearchController {

  @Autowired
  private MyRepository myRepository;

  @GetMapping("/search")
  public List<MyEntity> search(@RequestParam("keyword") String keyword) {
    return myRepository.findByNameContainingOrDescriptionContaining(keyword, keyword);
  }
}

其中，MyEntity是数据库中的实体类，MyRepository是一个JPA Repository，findByNameContainingOrDescriptionContaining是一个自定义的查询方法，用于执行模糊查询