Javascript AngularMaterial自动完成加载动画不会停止 背景：

我正在学习AngularJS并使用AngularMaterial

为了测试它，我决定用中给出的代码创建一个示例。我的应用程序是Cloud9中的nodeJS应用程序，非常简单

代码： 它分为三个主要文件，

index.html

（包含自动完成框）、

server.js

（包含服务器逻辑）和

autocomplete.js

（客户端逻辑）

下面是

index.html

文件，然后是

autocomplete.js

文件。因为我的服务器运行在Cloud9中，并且这个示例与之链接，所以您可以查看正在运行的小示例

/*全局角度*/
"严格使用",；
角度.module（'MyApp'，['ngMaterial'，'ngMessages'，'material.svgAssetsCache']）控制器（'DemoCtrl'，DemoCtrl）；
函数DemoCtrl（$q、$log、$http）{
this.searchText=null；
this.querySearch=函数（查询）{
让serverUrl='/material-complete-fl4m3ph03n1x.c9users.io/getStates'；
let deferred=$q.deferred（）；
$http({
方法：“GET”，
url:serverUrl，
参数：{
单词：查询
}
}).then（函数成功回调（响应）{
延迟。解析（响应。数据）；
}，函数errorCallback（响应）{
$log.error（响应）；
});
回报。承诺；
};
this.searchTextChange=函数（文本）{
$log.info（'文本更改为'+文本）；
};
this.selectedItemChange=功能（项目）{
$log.info（'Item改为'+JSON.stringify（Item））；
};
}

{{item.display}
未找到与“{ctrl.searchText}}”匹配的状态。

将

md min length

设置为

1

-在用户开始键入之前，您并不希望建议从外部服务完成

<md-autocomplete 
  md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" 
  md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)" 
  md-items="item in ctrl.querySearch(ctrl.searchText)" 
  md-item-text="item.display"
  md-min-length="1"
  placeholder="What is your favorite US state?">
  <md-item-template>
    <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
  </md-item-template>
  <md-not-found>
    No states matching "{{ctrl.searchText}}" were found.
  </md-not-found>
</md-autocomplete>

{{item.display}
未找到与“{ctrl.searchText}}”匹配的状态。

将

md min length

设置为

1

-在用户开始键入之前，您并不希望建议从外部服务完成

<md-autocomplete 
  md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" 
  md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)" 
  md-items="item in ctrl.querySearch(ctrl.searchText)" 
  md-item-text="item.display"
  md-min-length="1"
  placeholder="What is your favorite US state?">
  <md-item-template>
    <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
  </md-item-template>
  <md-not-found>
    No states matching "{{ctrl.searchText}}" were found.
  </md-not-found>
</md-autocomplete>

{{item.display}
未找到与“{ctrl.searchText}}”匹配的状态。

您从错误的位置返回承诺，并且没有正确返回链，因此无法正确解析

尝试以下操作（注意$http调用前面的返回）：

TLDR版本从注释中删除。这是一个已知的bug，到撰写本文时还没有发布修复程序。解决方法是回滚到AM 1.06或使用css隐藏progressbar。CSS:

md-autocomplete md-progress-linear { display: none; }

---

您从错误的位置返回承诺，并且没有正确返回链，因此无法正确解析

尝试以下操作（注意$http调用前面的返回）：

TLDR版本从注释中删除。这是一个已知的bug，到撰写本文时还没有发布修复程序。解决方法是回滚到AM 1.06或使用css隐藏progressbar。CSS:

md-autocomplete md-progress-linear { display: none; }

---

如果我这样做，当用户点击这个框时，什么也不会发生。我想在用户第一次单击框时显示所有状态，因此我需要

minlength=“0”

。如果我不需要，你的回答会被接受的。谢谢你的尝试。如果我这样做的话，当用户点击这个框时，什么都不会发生。我想在用户第一次单击框时显示所有状态，因此我需要

minlength=“0”

。如果我不需要，你的回答会被接受的。谢谢你的尝试。我用你的代码进行了测试，在选择了一些东西并清除之后，我仍然遇到同样的问题：我认为你也错过了另一次返回。我编辑了答案以反映这一点。仍然不起作用，您可以在这里查看示例：kudos++尝试…我认为您可能在AM材质中遇到错误。尝试在函数顶部添加if（！query）{return}，看看是否可以阻止自动完成在该点启动。成功了！你理所当然地赢得了赏金！祝你好运，我希望我们能再见面！我相信我将来还会需要你的帮助：pI用你的代码进行了测试，在选择了一些东西并清除之后，我仍然会遇到同样的问题：我认为你也错过了另一个回报。我编辑了答案以反映这一点。仍然不起作用，您可以在这里查看示例：kudos++尝试…我认为您可能在AM材质中遇到错误。尝试在函数顶部添加if（！query）{return}，看看是否可以阻止自动完成在该点启动。成功了！你理所当然地赢得了赏金！祝你好运，我希望我们能再见面！我相信我将来还需要你的帮助