Question

我在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>

Answer 1

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

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

1 个答案: