第一次单击文本框时如何显示自动完成下拉菜单？

Question

我正在使用Angular md-autocomplete，当他们第一次在文本框中键入内容后，它会开始在下拉菜单中向用户显示自动完成选项。无论如何，当用户第一次单击文本框中时，是否还会显示此下​​拉菜单？

这是md-autocomplete html：

<md-autocomplete flex
                 role="combobox"
                 md-selected-item="text"
                 md-no-cache="true"
                 md-search-text="searchText"
                 md-search-text-change="searchTextChange(searchText)"
                 md-items="item in getMatches(searchText)"
                 md-item-text="item.autocompleteVal"
                 md-min-length="0"
                 md-selected-item-change="$parent.selectedItemChange(item)" on-enter ng-cloak>
                            <span id="autocompleteText" md-highlight-text="searchText" md-highlight-flags="^i">{{item.autocompleteVal}} </span>
</md-autocomplete>

Answer 1

我遇到了同样的问题，但将 md-min-length 的值设置为零开始工作

md-min-length="0"

更新：如果它仍然不起作用，请确保 searchTerm 最初设置为 null

控制器

vm.searchTerm = null

网址：

md-search-text="vm.searchTerm"

Answer 2

正如@Hodglem指出的那样，当前的Material文档使用FormControl对象的valueChanges观察值来检测更改并过滤选项以显示在自动完成面板上。它们将初始值设置为“ null”，以便显示所有可用选项。

但是，通常您的选项列表来自服务（如我的用例），并且在startsWith(null)运行时您的列表为空，尤其是当此代码ngOnInit()位于Material文档中的方法中时。此方法将立即运行，而服务需要花费一些时间来填充列表。

如果没有选项，“自动完成”功能非常聪明，不会打开面板，因此，由于没有选项可显示，因此最初聚焦于元素不会打开面板。即使从服务填充列表之后，过滤器也仅会通过控件上的值更改来触发，因此在用户开始键入之前，自动完成功能的选项列表仍为空，因此面板保持关闭状态。

我有两种解决方案：

1. 将可观察的设置移出ngOnInit()方法，并移至subscribe()调用检索选项的服务之后的方法中。设置列表后，运行可观察的设置。现在，由于面板上有显示选项，因此面板将聚焦打开。（确保FormControl的初始化保留在ngOnInit()方法中，否则模板中的绑定将引发错误。）

2. 从头开始观察方法，然后将filter方法绑定到控件的本机事件，例如(focus)和(input)。在filter方法中，检查传入的值是否为null或为空，如果是，则返回整个列表。这样，每次用户单击控件或更改控件的值时都会触发过滤器，并且只要在服务填充选项列表后用户至少单击一次控件，面板就会显示出来。根据您的用例，我发现，当用户移动鼠标并专注于控件时，服务已经交付了商品，并且面板打开了。