3

我正在使用 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>
4

5 回答 5

7

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

md-min-length="0"

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

控制器

vm.searchTerm = null

html:

md-search-text="vm.searchTerm"
于 2017-10-03T09:28:53.573 回答
6

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

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

如果没有选项，自动完成功能足够聪明，不会打开面板，因此最初关注元素时不会打开面板，因为没有要显示的选项。即使在列表从服务中填充之后，过滤器也只会在控件上的值发生变化时触发，因此在用户开始输入之前，自动完成的选项列表保持为空，因此面板保持关闭状态。

我有两个解决方案：

  1. 将 observable 设置移出ngOnInit()方法，并移入subscribe()调用检索选项的服务之后的方法中。设置列表后，运行 observable 设置。现在面板将打开焦点，因为面板有显示选项。（确保FormControl的初始化保留在ngOnInit()方法中，否则模板中的绑定会抛出错误。）

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

于 2017-12-15T16:51:06.173 回答
2

似乎来自站点的演示按您的预期工作。 https://material.angularjs.org/latest/demo/autocomplete

于 2016-09-12T12:24:51.047 回答
2

对于 Angular 2 和 Material 2，将控件startWith()的valueChanges()observable 设置为 null 将显示所有值。忽略这将导致用户首先需要输入一个值才能查看结果。

焦点上显示的所有值：

this.filterFuelTypeObservers.push(newFormGroup.controls.fuelType.valueChanges
    .startWith(null)
    .map(value => value ? this.fuelTypeFilter(value) : this.fuelTypes));

在输入之前不显示任何值：

this.filterFuelTypeObservers.push(newFormGroup.controls.fuelType.valueChanges
    .map(value => value ? this.fuelTypeFilter(value) : this.fuelTypes));

我没有，但我想你可以startWith()尝试将焦点列表设置为也被某些东西过滤。

于 2017-07-03T17:15:45.490 回答
0

只需添加以下行

md-min-length="0"

即使只是单击，这也会触发 md-items 调用

于 2022-01-19T15:36:29.357 回答