Flask应用如何实现AJAX动态更新下拉建议的实时搜索输入框

现有代码无法显示联想下拉，原因有两个：

• 输入框的list属性拼写错误，且页面未添加对应id的下拉选项容器
• AJAX拿到联想词数组后仅打印到控制台，没有动态渲染成下拉选项

1. 修正HTML结构 #

找到输入框所在代码块，补全下拉容器，修正属性拼写：
原代码：

<div class="input-group mb-3">
  <input list="surgestions" type="text" id = "livebox" name="query">
  <p>{{data}}</p>
</div>

替换为：

<div class="input-group mb-3">
  <input list="suggestions" type="text" id="livebox" name="query" autocomplete="off">
  <datalist id="suggestions"></datalist>
  <p>{{data}}</p>
</div>

autocomplete="off"用来关闭浏览器默认的历史输入提示，避免和自定义联想词冲突。

2. 补全AJAX渲染逻辑 #

替换原有script标签里的JS代码，修正选择器错误，添加动态渲染逻辑，同时加防抖减少无效请求：
原代码：

<script>
  $(document).ready(function(){
      $("#livebox").on("input",function(e){
          $("#datalist").empty();
          $.ajax({
              method:"post",
              url:"/livesearch",
              data:{text:$("#livebox").val()},
              success:function(res){
                  console.log(res);
              }
          });
      });
  });
</script>

替换为：

<script>
  $(document).ready(function(){
      let timer = null;
      $("#livebox").on("input",function(e){
          clearTimeout(timer);
          const keyword = $(this).val().trim();
          $("#suggestions").empty();
          if(!keyword) return;
          
          // 300ms防抖，避免输入过快频繁请求接口
          timer = setTimeout(() => {
              $.ajax({
                  method:"post",
                  url:"/livesearch",
                  data:{text: keyword},
                  success:function(res){
                      const $suggestBox = $("#suggestions");
                      $suggestBox.empty();
                      // 遍历返回的联想词，生成下拉选项
                      res.forEach(item => {
                          $suggestBox.append(`<option value="${item}">`);
                      });
                  }
              });
          }, 300);
      });
  });
</script>

可选优化：自定义下拉样式 #

原生datalist样式修改灵活性差，如果需要自定义下拉外观，可以把datalist换成普通div容器，自己控制显示隐藏和样式，示例：
把HTML里的datalist换成：

<div class="custom-suggest"></div>

加对应的CSS：

.input-group {
  position: relative;
}
.custom-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ced4da;
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 999;
  display: none;
}
.custom-suggest.show {
  display: block;
}
.suggest-item {
  padding: 8px 12px;
  cursor: pointer;
}
.suggest-item:hover {
  background: #f5f5f5;
}

对应修改JS里的渲染逻辑，加点击填充功能即可，这种方式可以完全匹配项目的UI风格。

改完重启Flask服务，输入内容时就能看到实时联想下拉列表，点击选项会自动填充到输入框。

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