当输入为空时,md autocomplete显示无结果

时间:2016-12-12 16:31:27

标签: javascript angularjs autocomplete angular-material md-autocomplete

我使用的是md-autocomplete元素,但搜索字段为空时没有下拉列表。它甚至不会调用querySearch函数。当我输入任何内容时,触发功能并自动完成功能。我做错了什么?

HTML:

        <md-autocomplete
            md-selected-item="selectedItem"
            md-no-cache="true"
            md-search-text="searchText"
            md-items="item in querySearch(searchText)"
            md-item-text="item.name"
            placeholder="Select a Product">
              <span md-highlight-text="searchText">
                 {{ '{{item.originalName}}  ({{item.id}})' }}
              </span>
        </md-autocomplete>

JavaScript:

        function querySearch(query) {
            var results = query ? $scope.products.filter(createFilterFor(query)) : $scope.products;
            return results;
        }


        function createFilterFor(query) {
            var lowercaseQuery = angular.lowercase(query);

            return function filterFn(item) {
                return (angular.lowercase(item.originalName).indexOf(lowercaseQuery) === 0);
            };

        }

1 个答案:

答案 0 :(得分:3)

您应该添加md-min-length属性并将其设置为0

    <md-autocomplete
        md-selected-item="selectedItem"
        md-no-cache="true"
        md-search-text="searchText"
        md-items="item in querySearch(searchText)"
        md-item-text="item.name"
        md-min-length="0"
        placeholder="Select a Product">
          <span md-highlight-text="searchText">
             {{ '{{item.originalName}}  ({{item.id}})' }}
          </span>
    </md-autocomplete>