Angular Material 自动完成无数据或未找到消息答案

【问题标题】：Angular Material autocomplete no data or not-found-messageAngular Material 自动完成无数据或未找到消息
【发布时间】：2016-09-12 13:37:56
【问题描述】：

我的 md-autocomplete 没有同时显示数据和 md-not-found 数据。

angular.module('BlankApp').controller('ctrl', function($scope, $q){
    $scope.items = [{name: 'item1', id: 1}, {name: 'item2', id: 2}, {name: 'item3', id: 3}];

    $scope.promisedItems = function(){
        var deferred = $q.defer();
        deferred.resolve(items);
        return deferred.promise;
    }
});

<md-autocomplete md-selected-item="selectedItem2" md-search-text="searchText2" md-items="item in promisedItems()" md-item-text="item.name" md-min-length="0" placeholder="items">
    <md-item-template>
        <span md-highlight-text="searchText2" md-highlight-flags="^i">{{item.name}}</span>
    </md-item-template>
    <md-not-found>
        No states matching "{{searchText2}}" were found.
    </md-not-found>
</md-autocomplete>

Check the following codepen

Attempt1 显示数据但不显示“未找到消息”。
Attempt2 确实显示“未找到消息”，但不会显示数据。

我将它包装在一个承诺中。
如何让它们同时工作？

【问题讨论】：

标签： angularjs angular-material md-autocomplete

【解决方案1】：

原来 md-autocomplete 并没有为你做“搜索工作”。您需要实现搜索逻辑并返回找到的项目。

我使我的搜索逻辑又名过滤器通用，因此您不必制作大量搜索逻辑。

    $scope.searchCollection = function (searchString, collection, propertyName) {
        var deferred = $q.defer();
        var result = searchString ? collection.filter(createFilterFor(searchString, propertyName)) : collection;
        deferred.resolve(result);
        return deferred.promise;
    }

    function createFilterFor(searchString, propertyName) {
        var lowercaseQuery = angular.lowercase(searchString);
        return function filterFn(item) {
            return (angular.lowercase(item[propertyName]).indexOf(lowercaseQuery) === 0);
        };
    }

使用md-items="item in searchCollection(searchText, myCollection, 'propertyNameToSearchIn')"

【讨论】：