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"

Answer 2

正如@Hodglem指出的那样，当前的Material文档使用FormControl对象的valueChanges observable来检测更改并过滤要在自动完成面板上显示的选项。他们将初始值归为＆＃34; null＆＃34;这样 all 将显示可用选项。

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

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

我有两个解决方案：

将可观察设置移出ngOnInit()方法，并进入调用检索选项的服务之后的subscribe()方法。设置列表后，运行observable设置。现在，面板将在焦点上打开，因为面板具有显示选项。（确保FormControl的初始化保留在ngOnInit()方法中，否则模板中的绑定将引发错误。）
抓取可观察的方法，并将过滤方法绑定到控件的本机事件，例如(focus)和(input)。在filter方法中，检查传入的值是null还是空，如果是，则返回整个列表。这样，每次用户点击控件或更改其值时都会触发过滤器，并且只要用户在服务填充选项列表后至少一次点击控件，面板将显示。根据您的使用情况，我发现当用户移动鼠标并专注于控件时，服务已经交付了货物，面板就会打开。

Answer 3

看起来像网站上的演示工作正如您所期望的那样。 https://material.angularjs.org/latest/demo/autocomplete

Answer 4

对于Angular 2和Material 2，将控件的startWith() observable上的valueChanges()设置为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()来设置焦点列表以便通过某些东西进行过滤。

首次单击文本框时如何显示自动完成下拉列表？

4 个答案: