时间戳

首页 > 解决方案 > 使用 api 调用结果填充 typeahead

angularjs - 使用 api 调用结果填充 typeahead

问题描述

所以我对这个输入搜索栏的理想功能是从数据库中获取与用户在去抖动后输入的任何内容相匹配的所有结果。

我正在取回一个数组，并且预输入也在正常工作并正确显示数据。

但是，api 总是查询以前的值，现在查询当前输入中的任何内容。

例如，如果我要搜索的值是“时钟”：

输入值 = "";

如果我输入“时钟”，网络显示 api 正在获取“”。

如果我在“时钟”之后再添加一个字母，例如“时钟”，则网络显示它为“时钟”进行 api 获取。

这是发出 get 请求并返回用于填充 typeahead 的数组的函数。

    $scope.getDynamicSearchCompanies = function(val) {
      return $scope.Company.query({
        limit: 16,
        keyword: val
      }).$promise.then(function(res) {
        return res.companies;
      })
      .catch(function(err) {
        throw err;
      })
    }

<input 
    type="text" 
    placeholder="Company name or JNXS code" 
    ng-model="filter.company" 
    ng-model-options="{ debounce: 250 }" 
    class="form form-control" 
    uib-typeahead="company as (company.name + ' - ' + company.jinx_company_id + (!company.is_active ? ' (inactive)' : '') ) for company in getDynamicSearchCompanies(filter.company) | limitTo:16" 
    autocomplete="nope"
>

标签： angularjsapiasynchronoustypeahead

解决方案

如果你替换这个：

getDynamicSearchCompanies(filter.company)

有了这个：

getDynamicSearchCompanies($viewValue)

它会解决你的问题。您可以在此处阅读官方文档链接 和官方 plunker，其中包括与您的plunker相同的案例

推荐阅读