Angular bootstrap 异步加载时提前输入一个字符

Question

我在指令中实现了以下预输入代码。

这里是 HTML:

<div>
    <input type="text"
           ng-model="company"
           uib-typeahead="company as company.name for company in companyByName($viewValue)"
           typeahead-loading="loadingCompanies"
           typeahead-no-results="noCompanyResults"
           class="form-control">
    <i ng-show="loadingCompanies" class="glyphicon glyphicon-refresh"></i>
    <div ng-show="noCompanyResults">
        <i class="glyphicon glyphicon-remove"></i> No Results Found
    </div>
</div>

这里是 JavaScript:

  scope.companyByName = function() {
    var companyName = scope.company.name ? scope.company.name : scope.company;
    var searchTerms = {name: companyName, startRow: 0, endRow: 20};

    return $http.post("backend/get/companies.php", searchTerms).then((result) => {
      $log.info("Companies", result.data.results);
      return result.data.results;
    });
  };

PHP 代码 backend/get/companies.php 接受搜索字符串和 returns 具有 id 和 name 属性的对象数组，其名称包含该搜索字符串.

这是我遇到的行为：

当我在预输入字段中键入单个字符 "f" 时，传递给后端脚本的 companyName 的值为“”（空字符串）。 backend/get/companies.php returns 所有结果。

当我在预输入字段中键入第二个字符 "fo" 时，传递给后端脚本的 companyName 的值为 "f"。 backend/get/companies.php returns 个结果匹配 "f".

键入第三个字符 "foo" returns 结果匹配 "fo"，等等

我已经根据 official examples 对我的代码进行了建模。到底是怎么回事？我的感觉是 companyByName() 函数以某种方式被在字符输入输入之前触发的事件调用。有什么想法吗？

Answer 1

问题是 ng-model 落后于视图值。当调用 companyByName 时，ng-model 不会更新为输入字段中的最新值。要从输入中获取最新值，您应该使用传递给 companyByName 函数的参数：

scope.companyByName = function(viewValue) {
  var searchTerms = {name: viewValue, startRow: 0, endRow: 20};

  return $http.post("backend/get/companies.php", searchTerms).then((result) => {
    $log.info("Companies", result.data.results);
    return result.data.results;
  });
};

Answer 2

Typeahead 必须比页面摘要更快，因此使用范围而不是值只是不太合适。

Here 是一个显示两个版本的 plunker。基本上你需要第一个版本如下

 scope.companyByName = function(val) {
    var companyName = val;
    var searchTerms = {name: companyName, startRow: 0, endRow: 20};

    return $http.post("backend/get/companies.php", searchTerms).then((result) => {
      $log.info("Companies", result.data.results);
      return result.data.results;
    });
  };

Angular bootstrap 异步加载时提前输入一个字符

Angular bootstrap typeahead with asynchronous load is one character behind

javascript

php

angularjs

angular-ui-typeahead

angular-bootstrap