异步API返回字符串数组时uib-typeahead的正确配置

我来帮你搞定这个uib-typeahead的问题！先给你讲清楚异步返回字符串数组时的正确配置，再针对性解决你遇到的“无结果找到”问题。

一、异步API返回字符串数组的正确配置 #

要让uib-typeahead正常处理异步字符串数组，核心要注意这几点：

• 方法必须返回Promise：uib-typeahead会自动识别Promise并等待异步结果，所以你的vm.searchCompanies方法要返回一个Promise（比如$http调用的返回值，或者用$q包装的异步逻辑）。
• 正确的typeahead表达式：因为是字符串数组，表达式格式就是company for company in vm.searchCompanies($viewValue)，这里的$viewValue是输入框的实时内容，会作为参数传给你的搜索方法。
• 可选的实用配置：
  • typeahead-min-length="1"：设置输入至少1个字符才触发搜索，避免空输入就调用API。
  • typeahead-wait-ms="300"：防抖，减少频繁的API调用。
  • typeahead-loading="vm.isLoading"：绑定一个布尔值，用来显示加载状态。
  • typeahead-no-results="vm.noResults"：绑定布尔值，方便你排查是否真的无结果。

二、解决你当前的“无结果找到”问题 #

你的代码返回["", "aaa"]却始终显示无结果，大概率是这几个原因，咱们逐个排查：

1. 确保searchCompanies返回Promise #

如果你的方法是异步调用API，一定要返回Promise，比如：

vm.searchCompanies = function(query) {
  // 示例：用$http调用后端API
  return $http.get('/api/companies', { params: { keyword: query } })
    .then(function(response) {
      // 关键：过滤掉空字符串，避免无效选项干扰匹配
      return response.data.filter(company => company.trim() !== '');
    })
    .catch(function(error) {
      // 捕获错误，避免静默失败
      console.error('搜索公司出错:', error);
      return [];
    });
};

如果是模拟数据，也可以用$q包装成Promise：

vm.searchCompanies = function(query) {
  var deferred = $q.defer();
  // 模拟异步延迟
  setTimeout(function() {
    var results = ["", "aaa", "aab", "bbb"].filter(c => c.includes(query));
    // 过滤空字符串
    deferred.resolve(results.filter(item => item.trim() !== ''));
  }, 300);
  return deferred.promise;
};

2. 过滤返回数组中的空字符串 #

你的返回结果里有空字符串""，这不仅没用，还可能因为匹配逻辑（默认是包含匹配）导致当输入内容时，空字符串不匹配，而如果API返回的数组只有空字符串和"aaa"，但方法没正确传递结果，就会显示无结果。所以一定要在返回前过滤掉空字符串。

3. 检查模板的配置完整性 #

你的模板里typeahead-loading="loadin...明显没写完，建议补全并添加其他实用配置，修正后的模板示例：

<div class="col-md-6">
  <label ng-i18next="candidateAdd.formerCompany"></label>
  <input 
    type="text" 
    class="form-control m-input" 
    ng-model="vm.candidate.former_company" 
    uib-typeahead="company for company in vm.searchCompanies($viewValue)"
    typeahead-min-length="1"
    typeahead-wait-ms="300"
    typeahead-loading="vm.isLoadingCompanies"
    typeahead-no-results="vm.noResultsCompanies"
    placeholder="输入公司名称搜索"
  >
  <!-- 显示加载状态 -->
  <i ng-show="vm.isLoadingCompanies" class="glyphicon glyphicon-refresh"></i>
  <!-- 显示无结果提示 -->
  <div ng-show="vm.noResultsCompanies">无结果找到</div>
</div>

4. 测试同步场景排查问题 #

如果还是没结果，可以先把searchCompanies改成同步返回数组，看是否能正常显示：

vm.searchCompanies = function(query) {
  return ["aaa", "bbb", "ccc"].filter(c => c.includes(query));
};

如果同步能显示结果，说明异步逻辑有问题（比如API调用失败、Promise没正确返回）；如果同步也不显示，那可能是ng-model绑定错误，或者typeahead的依赖没正确引入（比如没加载ui.bootstrap.typeahead模块）。

内容的提问来源于stack exchange，提问作者Juan Pablo Fernandez