CODEWITHSUNDEEP
javascriptangularjsautocompleteangular-materialmd-autocomplete
Sslink
Sslink

Reputation: 89

md autocomplete shows no results when input is empty

I am using a md-autocomplete element, but there is no dropdown when the search field is empty. It doesn't even call the querySearch function. When I type anything the function is triggered and the autocomplete works. What am I doing wrong?

The 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>

The 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);
            };

        }

Upvotes: 0

Views: 1397

Answers (1)

ndoes
ndoes

Reputation: 678

You should add the md-min-length attribute and set it to 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>

Upvotes: 5

Related Questions