AngularJs - ngTagsInput 自动完成应该只显示匹配的结果答案

【问题标题】：AngularJs - ngTagsInput autocomplete should only show the matched resultAngularJs - ngTagsInput 自动完成应该只显示匹配的结果
【发布时间】：2018-08-03 04:43:43
【问题描述】：

我在我的 AngularJs 应用程序中使用指令 ngTagsInput 进行标签输入。到目前为止它工作正常，但我一直在尝试显示自动完成的匹配结果以突出显示并显示在顶部，删除所有不匹配的结果。

我关注了this example，但一切都是徒劳的，因为它只会使匹配的项目变粗。

有人可以指出我缺少什么吗？

$http.get(baseURL + '/misc/getAllSearchTags?token=' + token)
  .then(function(response) {
    $scope.tagsList = response.data.data;
  });

$scope.tags = [];
$scope.loadtags = function($query) {
  return $scope.tagsList;
};

.tag-template .left-panel {
  float: left;
}

.tag-template .left-panel img {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.tag-template .right-panel {
  float: left;
  margin-left: 5px;
}

.autocomplete-template .left-panel {
  float: left;
}

.autocomplete-template .left-panel img {
  width: 48px;
  height: 48px;
  vertical-align: middle;
}

.autocomplete-template .right-panel {
  float: left;
  margin-left: 5px;
  margin-top: 7px;
}

.autocomplete-template .right-panel span:first-child {
  font-size: 16px;
}

.autocomplete-template .right-panel span:nth-child(2) {
  font-size: 14px;
  color: gray;
}

.autocomplete-template .right-panel span:last-child {
  display: block;
  font-size: 14px;
  font-style: italic;
}

<div class="col-md-6 col-xs-12">
  <tags-input ng-model="tags" display-property="name" placeholder="Add a Tag" replace-spaces-with-dashes="false">
    <auto-complete source="loadtags($query)" min-length="0" load-on-focus="true" load-on-empty="true" max-results-to-show="100" template="../retailerManagement/views/autoCompleteTemplate.html"></auto-complete>
  </tags-input>

</div>



//
<!--autoCompleteTemplate-->

<html>

<body>

  <div class="autocomplete-template">
    <div class="left-panel">

    </div>
    <div class="right-panel">
      <span ng-bind-html="$highlight($getDisplayText())"></span>
    </div>
  </div>

</body>

</html>

【问题讨论】：

标签： angularjs autocomplete ng-tags-input

【解决方案1】：

您必须自定义 $scope.loadtags 函数以仅返回与查询匹配的结果。您需要在该函数中过滤 $scope.tagsList 并返回过滤后的列表。

【讨论】：