AngularJS自动补全组件空输入时显示全部选项的实现问题

我之前也碰到过一模一样的情况——明明设置了min-length="0"，但空输入状态下就是出不来全部选项。这是因为ng-tags-input默认对数组类型的source有特殊处理，空查询时不会主动返回完整列表，得我们手动调整source的实现逻辑。

下面是具体的解决步骤：

1. 把数组源替换为自定义查询函数 #

不再直接绑定vm.groupList作为source，而是写一个能处理空查询的函数，主动在输入为空时返回所有选项。

在你的控制器里添加这个函数（可以根据你的数据结构调整匹配逻辑）：

vm.getGroupOptions = function(query) {
  // 空查询时直接返回全部分组列表
  if (!query || query.trim() === '') {
    return vm.groupList;
  }
  // 非空查询时，过滤出匹配的选项（这里用名称模糊匹配，你可以改成自己的业务逻辑）
  return vm.groupList.filter(group => 
    group.name.toLowerCase().includes(query.toLowerCase())
  );
};

2. 更新模板中的auto-complete配置 #

修改模板里的source属性指向刚才定义的函数，同时加上show-autocomplete-on-focus="true"，确保点击输入框（空状态）就能触发补全列表：

<auto-complete 
  source="vm.getGroupOptions(query)" 
  min-length="0" 
  max-results-to-show="10" 
  highlight-matched-text="true" 
  select-first-match="false"
  show-autocomplete-on-focus="true">
</auto-complete>

3. （可选）处理异步加载的分组列表 #

如果你的vm.groupList是从后端异步获取的，把查询函数改成返回Promise即可：

vm.getGroupOptions = function(query) {
  if (!query || query.trim() === '') {
    // 空查询时请求全部分组数据
    return $http.get('/api/groups').then(res => res.data);
  }
  // 带查询参数请求过滤后的分组数据
  return $http.get(`/api/groups?search=${query}`).then(res => res.data);
};

这样调整后，当搜索框为空或者点击输入框时，就会自动显示所有分组选项了。

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