md-autocomplete 将结果显示为列表而不是下拉列表答案

【问题标题】：md-autocomplete displays results as a list instead of dropdownmd-autocomplete 将结果显示为列表而不是下拉列表
【发布时间】：2019-08-25 13:49:59
【问题描述】：

我正在尝试使用 Angular Material md-autocomplete 标记在我的表单中显示有关邮政编码的建议。我正在调用异步服务来获取建议并填充结果。我使用https://material.angularjs.org/latest/api/directive/mdAutocomplete 上的演示代码作为参考。但是，结果在我的表单下方显示为 ul-li。有人可以帮我弄清楚可能出了什么问题吗？我已经在我的 html 中包含了所需的文件。这是sn-ps的代码：

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>

表单中的输入元素

<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 控制器

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

我正在从后端调用所需的 api 并将响应作为数组获取。它也被打印在控制台中。但是，最终结果会显示为我的表单下方的列表，如下所示：

【问题讨论】：

如何映射数据？
我得到的结果是一个邮政编码数组。
这是一个 CSS 问题。下拉列表的 HTML 通常是带有 <ul> 和 <li> 元素的无序列表。正是 CSS 皮肤使它看起来像一个下拉菜单。检查是否加载了适当的 CSS 脚本以及是否将适当的类应用于列表。 unpkg.com/angular-material/angular-material.css
@georgeawg 非常感谢您的帮助！我错过了包含 css 文件。

标签： html angularjs angular-material angular-ui-bootstrap md-autocomplete

【解决方案1】：

你应该添加 angularjs 材质 css 文件。

<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css">

【讨论】：