jQuery Autocomplete无查询结果删最后字符后如何重新执行查询

嘿，这个问题我熟！你现在的情况是：输入两个字符后触发查询，要是数据库没返回数据，你已经实现了自动删掉最后一个字符，但删掉之后插件没自动重新查数据对吧？

问题的核心在于：当你手动修改输入框的值时，jQuery Autocomplete不会自动触发搜索逻辑——它默认只在用户输入、点击选项这类交互时才会发起查询。所以咱们要做的就是，在完成字符删除操作后，手动调用插件的搜索方法来触发新一轮查询。

具体修改方案 #

假设你的现有脚本结构大概是这样，我给你调整一下关键部分：

// 先缓存输入框的jQuery对象，避免重复DOM查询
var $autocompleteInput = $("#your-input-id");

$autocompleteInput.autocomplete({
  minLength: 2, // 你设置的输入2个字符触发查询
  source: function(request, response) {
    // 这里是你从数据库拉取数据的AJAX请求
    $.ajax({
      url: "your-api-url", // 替换成你的接口地址
      data: { term: request.term },
      success: function(data) {
        // 判断：输入长度为2且无返回数据时
        if (data.length === 0 && request.term.length === 2) {
          // 删除最后一个字符，得到新的查询关键词
          var newSearchTerm = request.term.slice(0, -1);
          // 更新输入框的值
          $autocompleteInput.val(newSearchTerm);
          // 关键一步：手动调用autocomplete的search方法，触发重新查询
          $autocompleteInput.autocomplete("search", newSearchTerm);
        } else {
          // 正常返回数据给插件
          response(data);
        }
      },
      error: function() {
        // 处理AJAX错误，返回空数组避免插件报错
        response([]);
      }
    });
  }
});

关键细节说明 #

1. 手动调用search方法：autocomplete("search", newSearchTerm)会强制插件用你传入的新关键词发起查询，哪怕当前输入长度不符合minLength的设置（比如删除后只剩1个字符）。如果不传第二个参数，插件会默认使用输入框当前的值，效果是一样的。
2. 缓存DOM对象：提前把输入框的jQuery对象存起来，避免在回调里重复查询DOM，提升性能。
3. 错误处理：加上AJAX的错误回调，返回空数组，防止插件因为请求失败出现异常。

额外注意点 #

如果你的需求是删除字符后，只有当新的关键词长度符合minLength才触发查询，那可以在调用search前加个判断：

if (newSearchTerm.length >= $autocompleteInput.autocomplete("option", "minLength")) {
  $autocompleteInput.autocomplete("search", newSearchTerm);
}

这样就完美解决你的问题啦，测试一下应该就能看到删除字符后自动重新查询的效果了！

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