如何实现清空输入框后自动清除Autocomplete搜索结果？

嘿，我来帮你搞定这个需求！核心就是要让输入框内容清空的动作，同时触发两个行为：关闭Autocomplete的搜索结果列表，以及隐藏显示“找到X套房屋”的弹窗。我结合你提供的代码结构，给你一套可行的解决方案：

第一步：补全你的HTML结构（假设你的输入框和弹窗结构如下） #

先把你截断的搜索框代码补全，同时加上房屋数量弹窗的元素：

<table style="border:none">
  <tr>
    <td><label class="editor-label">Search Address:</label></td>
    <td id="searchBar1">
      @Html.TextBox("searchAddress", "", new { @class = "form-control", id = "searchAddress" })
      <!-- 这里是显示房屋数量的弹窗，初始隐藏 -->
      <div id="houseResultPopup" style="display: none; margin-top: 8px; padding: 6px; background: #f5f5f5; border-radius: 4px;">
        找到<span id="houseCount">0</span>套房屋
      </div>
    </td>
  </tr>
</table>

第二步：修改你的jQuery Autocomplete代码 #

下面是调整后的jQuery代码，重点加入了输入框清空时的监听逻辑，以及和弹窗的联动：

$(function() {
  // 初始化Autocomplete
  $("#searchAddress").autocomplete({
    source: function(request, response) {
      // 你的Ajax请求逻辑，这里替换成你实际的接口地址
      $.ajax({
        url: "/YourController/SearchHouses", // 替换为你的搜索接口
        type: "GET",
        data: { term: request.term.trim() },
        success: function(searchResults) {
          response(searchResults);
          // 根据搜索结果数量控制弹窗显示/隐藏
          var resultCount = searchResults.length;
          $("#houseCount").text(resultCount);
          $("#houseResultPopup").toggle(resultCount > 0);
        },
        error: function() {
          // 请求出错时隐藏弹窗
          $("#houseResultPopup").hide();
        }
      });
    },
    minLength: 1, // 至少输入1个字符才触发搜索
    // 当下拉列表关闭时，额外检查输入框是否为空
    close: function() {
      if ($(this).val().trim() === "") {
        $("#houseResultPopup").hide();
      }
    }
  });

  // 实时监听输入框内容变化，一旦清空就同步处理
  $("#searchAddress").on("input", function() {
    var inputVal = $(this).val().trim();
    if (inputVal === "") {
      // 关闭Autocomplete下拉列表（如果还显示的话）
      $(this).autocomplete("close");
      // 隐藏房屋数量弹窗
      $("#houseResultPopup").hide();
    }
  });
});

关键逻辑说明 #

• input事件监听：实时捕获输入框的每一次内容变化，只要内容被清空（包括一键删除、逐字删空），就立即关闭下拉列表并隐藏弹窗，保证同步性。
• Ajax回调中的弹窗控制：每次搜索完成后，根据返回的结果数量决定是否显示弹窗——有结果就显示，没结果直接隐藏。
• close事件双重保障：防止某些特殊场景下（比如点击页面其他地方关闭下拉，但输入框已经被清空），弹窗还残留的情况，做二次检查。

如果你的弹窗是用其他类名或ID定义的，只需要把代码里的#houseResultPopup和#houseCount替换成你实际的选择器就行啦！

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