Question

一切都很好，但是当您在自动完成输入外部点击时，文本会变得不可见，如果您在输入中单击它会再次变黑并且您看到它在那里。这是我的HTML：

   <body ng-app='myapp' layout="column" ng-controller="autocompleteController as ctrl">
<md-content layout-align="center" layout="row">
<md-input-container style="background-color: #3C83E1; padding: 1vh 1vh 1vh 1vh" flex="33" class="md-whiteframe-4dp">
    <div layout="row" layout-align="center center" style="margin-bottom: 1vh; margin-top: 1vh">
        <img src="http://www.simplesdental.com/assets/img/simplesdental-logo-b.svg">
    </div>
    <md-autocomplete
            md-no-cache="ctrl.noCache"
            md-autoselect="true"
            md-search-text="ctrl.searchText"
            md-items="item in ctrl.queryProcurar(ctrl.searchText)"
            md-item-text="item.name"
            md-floating-label="Nome do Paciente"
    >
        <span md-highlight-text="ctrl.searchText">{{item.name}}</span>
        <md-not-found>
            N&atilde;o foi encontrado um paciente com o nome "{{ctrl.searchText}}".
        </md-not-found>
    </md-autocomplete>

</md-input-container>

和我的js：

    angular.module('myapp', ['ngMaterial'])
        .controller("autocompleteController", function ($http) {
            Object.filter = function (obj, predicate) {
                var result = {}, key;
                for (key in obj) {
                    if (obj.hasOwnProperty(key) && !predicate(obj[key])) {
                        result[key] = obj[key];
                    }
                }
                return result;
            };
            this.queryProcurar = function (query) {
                return $http.get("https://jsonplaceholder.typicode.com/users")
                    .then(function (response) {
                        var res = response.data.filter(function (obj) {
                            return obj.name.toLowerCase().indexOf(query.toLowerCase()) != -1;
                        });
                        return res;
                    })
            }
        })

这里是一个演示：http://codepen.io/iurypiva/pen/YZQeBN

Answer 1

问题是md-input-container和md-floating-label在他们的css中有一些奇怪的冲突。解决了它将de md-container改为简单的div

Answer 2

问题实际上只是一个CSS /样式问题

解决此问题的最简单方法是使用适用于md-input-id（documentation here）的角度素材md-autocomplete属性

<md-autocomplete
   md-input-id="searchinput"
   md-autoselect="true"
   md-search-text="ctrl.searchText"
   md-items="item in ctrl.queryProcurar(ctrl.searchText)"
   md-item-text="item.name"
   md-floating-label="Nome do Paciente">

这会将ID（在我的示例中称为searchinput）附加到md-autocomplete自动生成的输入，您可以使用该输入来设置输入的样式。

我在您的codepen中尝试过的CSS就是：

#searchinput { color: white; }

here is a fork of your codepen with these updates

Answer 3

由于我在ng-repeat中使用它，我不想为多个元素赋予相同的ID以便设置样式，所以我进一步观察。

问题实际上证明input的{{1}}部分包含在自己的md-autocomplete中。有问题的css会检查md-input-container内是否有输入不的md-input-container类。外面的（你的和我的）不是，只是内部的。

所以我有选择。

我可以删除md-input-container并将其设为div，如另一个答案所示。但是，因为我的页面中已有md-input-has-value内的其他一些输入，并且因为md-input-container不在md-autocomplete内（只有md-input-container里面），我必须复制md-input-container使用的所有样式（text-align：vertical; padding：2px;等等）。

或者我可以将input添加到class="md-input-has-value"。

我选择了更简单的路线。

md-input-container

请参阅modified your codepen

离开输入时，具有md-float-label的md-autocomplete文本将变为不可见

3 个答案: