I have an md-autocomplete component from AngularJS Material and it does not show the dropdown with the options after first click in the input, as it is supposed to shown. It shows the full list of options in the dropdown when I click on input after I've done a search and then delete the entered input. Can anyone tell what is wrong in my code? Here is my code:
I tried the md-min-legth attribute but it does not work.
<md-autocomplete ng-disabled="false"
md-no-cache="true"
name="projectAutocompleteFormRecord"
md-selected-item="model.TimeRecord.Project"
md-items="project in querySearchForProjectRecord(searchProjectTextRecord)"
md-item-text="project.Code + (project.DerivedCode ? project.DerivedCode : '') + '-' + project.Title"
md-search-text="searchProjectTextRecord"
md-min-length="0"
placeholder="Project">
<md-item-template>
<div class="item-title">
<span md-highlight-text="searchProjectTextRecord"
md-highlight-flags="ig">
{{project.Code + (project.DerivedCode ? project.DerivedCode : "") + "-" + project.Title}}
</span>
</div>
</md-item-template>
</md-autocomplete>
<script>
// initialize of $scope.projs;
$scope.searchProjectTextRecord = "";
$scope.querySearchForProjectRecord = function (query) {
var results = [];
var projects = $scope.projs;
if (projects) {
results = query ? projects.filter(item => item.Code.toLowerCase().includes(query.toLowerCase()) ||item.Title.toLowerCase().includes(query.toLowerCase())) : projects;
}
return results;
}
</script>
I managed to fix it by adding the <md-not-found>
element.