如何更新数据列表以实现动态自动完成？答案

【问题标题】：How to update datalist for dynamic auto-completion?如何更新数据列表以实现动态自动完成？
【发布时间】：2016-07-12 04:37:19
【问题描述】：

我正在使用数据列表在输入文本中自动完成。我很好地初始化它，但我想动态更新我的来源和我的建议。

你知道怎么做这样的事情吗？

HTML：

<input type="text" ng-model="title" list="suggestionList" ng-change="changeIsRaised()">
<datalist id="suggestionList">
    <option data-ng-repeat="ttl in titles" value="{{ttl}}">
</datalist>

JavaScript：

$scope.titles = ["Action Comics", "Detective Comics", "Superman", "Fantastic Four", "Amazing Spider-Man"];

$scope.changeIsRaised = function() {
    if ($scope.title == "ch") {
        var newSrc = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
        $scope.titles = newSrc;

    }
}

【问题讨论】：

什么不起作用？看起来应该可以了。
不，它没有:(

标签： javascript angularjs html angularjs-ng-repeat datalist

【解决方案1】：

您列出了两次“nicolas”，导致出现ng-repeat 错误。您可以添加 track by $index 来修复它，但您可能应该删除重复项。

function ctrl($scope) {
  $scope.titles = ["Action Comics", "Detective Comics", "Superman", "Fantastic Four", "Amazing Spider-Man"];

  $scope.changeIsRaised = function() {
    if ($scope.title == "ch") {
      var newSrc = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "joseph"];
      $scope.titles = newSrc;

    }
  }
}
angular.module('app', []).controller('ctrl', ctrl);

<body ng-app="app">
  <div ng-controller="ctrl">
    <input type="text" ng-model="title" list="suggestionList" ng-change="changeIsRaised()">
    <datalist id="suggestionList">
      <option data-ng-repeat="ttl in titles" value="{{ttl}}">
    </datalist>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>

【讨论】：