用bootstrap+jquery +spring 做一个类似百度搜索的功能

阿虎-cqh

已于 2024-08-05 14:04:46 修改

阅读量402

点赞数 3

文章标签： bootstrap jquery spring

于 2024-08-05 11:32:37 首次发布

本文链接：https://blog.csdn.net/chenqinghu98/article/details/140922450

版权

前端

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <th:block th:include="include :: header('查询')" />
</head>
<style>
  .highlight {
    transition: background-color 0.3s; /* 平滑过渡效果 */
    background-color: #fff; /* 默认背景色 */
    color: #333333;
  }

  .highlight:hover {
    color: #3a8ee6;
    background-color: #f0f0f0; /* 鼠标悬浮时的背景色 */
  }
</style>
<body class="gray-bg">
<div class="container mt-5"  >
  <div class="row" style="margin-top: 230px" align="center">
    <div class="col-md-10 mx-auto" >
      <input type="text" id="search-input" class="form-control " placeholder="请输入搜索词" style="height: 50px;font-size: large">
      <div id="autocomplete-items" ></div>
    </div>
      <a class="btn btn-primary btn-rounded btn-lg" onclick="Search()" ><i class="fa fa-search"></i>搜索</a>
  </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
  var prefix = ctx + "A/B";

  $(document).ready(function(){
    $('#search-input').keyup(function(){
      var query = $(this).val();
      if(query != ''){
        $.ajax({
          url: prefix+'/api/search',
          type: 'GET',
          data: {term: query},
          success: function(data){
            $('#autocomplete-items').show();
            $('#autocomplete-items').empty();
            $.each(data, function(key, value){
              $('#autocomplete-items').append('<div class="autocomplete-item highlight" style="margin-top: 5px;font-size: large">'+value+'</div>');
            });
          }
        });
      } else {
        $('#autocomplete-items').hide();
      }
    });

    $(document).on('click', '.autocomplete-item', function(){
      $('#search-input').val($(this).text());
      $('#autocomplete-items').hide();
    });
  });


  function Search(){
    let val = $('#search-input').val();
    $.ajax({
      url: prefix+'/api/search/forname',
      type: 'GET',
      data: {term: val},
      success: function(data){
        let id = data.id;
        let status = data.status;
        if(status=="2"){
          window.location.href=ctx+"A/B/detail/"+id;
        }else {
          $.modal.alertWarning("未通过");
        }

      }
    });
  console.log(val)
  }

</script>
</body>
</html>

后端

  @RequestMapping ("/api/search")
    @ResponseBody
    public  List<String> autocomplete(@RequestParam(value = "term") String term) {

        List<InstitutionalFiling> list = institutionalFilingService.selectInstitutionalFilingList(new InstitutionalFiling());
        List<String> suggestions = new ArrayList<>();
        // 这里可以添加逻辑来从数据库或其他地方获取匹配的搜索词
        // 示例中仅返回一些静态数据
        for (InstitutionalFiling institutionalFiling : list) {
            String name = institutionalFiling.getName();
            if(name.contains(term)){
                suggestions.add(institutionalFiling.getName());
            }
        }
        //去重
        List<String> names = suggestions.stream().distinct().collect(Collectors.toList());
        return names;
    }

    @RequestMapping ("/api/search/forname")
    @ResponseBody
    public InstitutionalFiling autocompleteforname(@RequestParam(value = "term") String term) {
        InstitutionalFiling institutionalFiling = new InstitutionalFiling();
        institutionalFiling.setName(term);
        PageHelper.startPage(1, 9, "update_time desc");
        List<InstitutionalFiling> list = institutionalFilingService.selectInstitutionalFilingList(institutionalFiling);
        InstitutionalFiling filing = list.stream().findFirst().get();
        return filing;
    }