AngularMaterial md-chips : Dont show selected item in <md-autocomplete>

Question

I'm trying the <md-autocomplete> example from here md-chips

To prevent the selected items from coming inside <md-autocomplete> I've modified the querySearch function like this:

function querySearch (query) {
    var results = query ? self.searchData.filter(createFilterFor(query)) : [];
    var finalResults = [];
    angular.forEach(results, function(result) {
        if($scope.selectedItems.indexOf(result.name) < 0) {
            finalResults.push(result);
            updateSelectedItems(result);    
         }
    });
    return finalResults;
}

But my problem is that the control does not come inside this function once we select an item. Can someone please explain how to solve this ?

Answer 1

I found the solution from this documentation: md-autocomplete

We just need to add md-no-cache="true" for calling the querySearchfunction each time we search for a query item

Answer 2

The solution that worked for me: The md-no-cache="true" on md-autocomplete still is a must to force the autocomplete to reinitialize the md-items; Md-chips should have md-on-remove and md-on-append set and implemented as to remove a chip from the list, or add a chip to the list;

My code looks something like this: HTML:

 md-on-remove="removeTagChip($chip)"
 md-on-append="appendTagChip($chip)"

JS:

$scope.removeTagChip = function (chip) {
    var chipPos = $scope.getPosition(chip.Id, $scope.ChipTags);
    if (chipPos < 0) {
        $scope.ChipTags.push(chip);
    }
};
$scope.appendTagChip = function (chip) {
    var chipPos = $scope.getPosition(chip.Id, $scope.ChipTags);
    if (chipPos > -1) {
        $scope.ChipTags.splice(chipPos, 1);
    }
    return chip;
};

$scope.getPosition just returns the position of the chip in the list of chips;