I am using the directive ngTagsInput for tag input in my AngularJs app. So far it works fine but I have been trying to show the matched result of autocomplete to be highlighted and appear on the top, removing all those unmatched.
I followed this example but all to vain as it only makes the matched item bold.
Can somebody please point out what am i missing?
$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>
You have to customize your $scope.loadtags function to return only the results that match the query. You need to filter $scope.tagsList in that function and return the filtered list.