I am currently experiencing an issue with my md-autocomplete element - the dropdown does not appear when the search field is empty. Surprisingly, the querySearch function is not even being called at that point. However, once I start typing something, the function is triggered and the autocomplete feature starts working as expected. Can anyone pinpoint what might be causing this behavior?
Here's the HTML code snippet:
<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 code section:
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);
};
}