I am trying to use Angular Material md-autocomplete tag to display suggestions for zipcode in my form. I am calling an asynchronous service to get the suggestions and populate the results. I used the demo code on https://material.angularjs.org/latest/api/directive/mdAutocomplete as a reference. However, the results are getting displayed as a ul-li's below my form. Can someone please help me figure out what could be going wrong? I have included the required files in my html. Here are the code snippets:
HTML
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.js"></script>
input element in form
<md-autocomplete flex
md-selected-item="selectedItem"
md-search-text="searchText"
md-items="x in query(searchText)"
md-item-display="x.display"
md-clear-button="false">
<md-item-template>
<span md-highlight-text="searchText">{{x}}</span>
</md-item-template>
</md-autocomplete>
AngularJS Controller
var app = angular.module("App", ['ngMaterial', 'ngMessages']);
app.controller("MainController", function ($scope, $http) {
$scope.query = function(searchText) {
return $http.get(BACKEND_URL + '/items/' + searchText)
.then(function(response) {
return response.data;
});
};
});
I am calling the required api from the backend and getting the response as an array. It is getting printed in the console as well. But, the final results get displayed as a list below my form like this:
You should add angularjs material css file.
<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css">