如何在ngMaterial md-autocomplete中过滤查询?

时间:2017-03-08 17:48:06

标签: javascript jquery angularjs material-design angular-material

我需要在客户端过滤结果,我的意思是,不传递ajax参数。但我无法弄清楚这一点。 这是我的js:

    angular.module('myapp', ['ngMaterial']).controller("autocompleteController", function ($http) {this.querySearch = function (query) {
            return $http.get("https://jsonplaceholder.typicode.com/users")
                .then(function (response) {
 //wild black magic stuff needed here
                    return response.data;
                })
        }
    });

和我的HTML:

<md-autocomplete flex
                         md-select-on-match="true"
                         md-autofocus="true"
                         md-autoselect="true"
                         md-selected-item="item.name"
                         md-search-text="ctrl.searchText"
                         md-search-text-change="ctrl.querySearch(ctrl.searchText)"
                         md-items="item in ctrl.querySearch(ctrl.searchText)"
                         md-item-text="item.name"
                         md-delay="300"
                         md-floating-label="Nome do Paciente">
            <div layout="row" class="item" layout-align="start center">
                <span md-highlight-text="ctrl.searchText">{{item.name}}</span>
            </div>
        </md-autocomplete>

如果需要,请使用plunker https://embed.plnkr.co/Kov5pgwqkv1ZyCCOIsCX/

1 个答案:

答案 0 :(得分:1)

在promise中使用这样的过滤器来按名称过滤数据

.then(function(response) {
    var res = response.data.filter(function(obj) {
        return obj.name.toLowerCase().indexOf(query) != -1;
    });
    return res;
})

Demo