如何整合两个GET请求？解决搜索过滤后关键词丢失及回显问题

1. 修复过滤器表单丢失关键词的问题 #

当前过滤表单提交时未携带keyword参数，导致Controller接收不到关键词，查询返回空结果。需在过滤表单中添加隐藏字段传递当前搜索关键词，同时让单选框保留选中状态：

<form th:action="@{/search}" method="get">
    <p>Filters</p>
    <!-- 新增隐藏字段携带关键词 -->
    <input type="hidden" name="keyword" th:value="${keyword}">
    <div>
        <h3>Type</h3>
        <label for="all">all</label>
        <input type="radio" id="all" name="type" value="all" th:checked="${type == null or type == 'all'}"/>
        <label for="team">team</label>
        <input type="radio" id="team" name="type" value="team" th:checked="${type == 'team'}"/>
        <label for="player">player</label>
        <input type="radio" id="player" name="type" value="player" th:checked="${type == 'player'}"/>
    </div>
    <div>
        <input class="btn" type="submit" value="search">
    </div>
</form>

2. 让头部搜索栏回显关键词 #

修改头部搜索栏的输入框，通过Thymeleaf绑定Model中的keyword值，确保搜索或过滤后关键词保留在搜索栏：

<form class="d-none d-lg-flex" role="search" th:action="@{/search}" method="get">
    <label for="keyword"></label>
    <input class="form-control me-2" name="keyword" id="keyword" type="text"
           placeholder="search team or player" th:value="${keyword}">
    <input type="submit" value="search" class="btn">
</form>

3. 优化Controller逻辑，传递状态到前端 #

在Controller中把接收到的keyword和type添加到Model，同时优化空关键词的查询逻辑：

@GetMapping("/search")
public String search(Model model,
                     @RequestParam(required = false) String keyword,
                     @RequestParam(required = false) String type) {

    List<Team> teams = new ArrayList<>();
    List<Player> players = new ArrayList<>();
    
    // 空关键词时不执行查询（根据业务需求调整）
    if (keyword != null && !keyword.isEmpty()) {
        teams = teamRepository.findAllByKeyword(keyword);
        players = playerRepository.findAllByKeyword(keyword);
    }

    if (type == null || type.isEmpty() || type.equals("all")) {
        model.addAttribute("teams", teams);
        model.addAttribute("players", players);
        model.addAttribute("totalPlayers", players.size());
        model.addAttribute("totalTeams", teams.size());
    } else if (type.equals("team")) {
        model.addAttribute("teams", teams);
        model.addAttribute("totalTeams", teams.size());
    } else if (type.equals("player")) {
        model.addAttribute("players", players);
        model.addAttribute("totalPlayers", players.size());
    }

    // 传递关键词和过滤类型到前端用于回显
    model.addAttribute("keyword", keyword);
    model.addAttribute("type", type);
    
    logoService.addLogos(model);

    return "search";
}

核心作用 #

• 隐藏字段保证过滤请求携带关键词，Controller能正确执行搜索
• th:value和th:checked让页面重载后保留搜索关键词和过滤选择
• Model传递状态参数，确保前端始终能获取当前搜索上下文

内容的提问来源于stack exchange，提问作者user22540255