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

我使用的是Angular md autocomplete，在用户第一次在文本框中键入后，它开始在下拉列表中显示自动完成选项。用户第一次单击文本框时是否也会显示此下拉列表

以下是md自动完成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>

{{item.autocompleteVal}}

看起来像是网站上的演示，正如您所期望的那样。

---

对于角度2和材质2，将控件的

valueChanges（）

可观察项上的

startWith（）

设置为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（）

将焦点列表也设置为按某个内容过滤。

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

md-min-length="0"

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

控制器

vm.searchTerm = null

Html:

---

正如@Hodgelem所指出的，当前的Material文档使用FormControl对象的valueChanges observable来检测更改并过滤要显示在autocomplete面板上的选项。它们将初始值初始化为“null”，以便显示所有可用选项

但是，您的选项列表通常来自服务（如在我的用例中），当运行

startsWith（null）

时，您的列表是空的，特别是当此代码位于

ngOnInit（）

方法中时，就像在物料文档中一样。此方法立即运行，而服务需要时间来填充列表

Autocomplete足够智能，在没有选项的情况下不会打开面板，因此元素的初始焦点不会打开面板，因为没有可显示的选项。即使在列表从服务中填充之后，过滤器也只会在控件上的值发生更改时触发，因此，直到用户开始键入，autocomplete的选项列表仍然为空，因此面板将保持关闭

我有两个解决方案：

将可观察设置移出

ngOnInit（）

方法，并移到调用检索选项的服务后的

subscribe（）

方法中。设置列表后，运行observable设置。现在，面板将在焦点上打开，因为面板具有显示选项。（确保FormControl的初始化保留在

ngOnInit（）

方法中，否则模板中的绑定将抛出错误。）

划掉可观察方法，并将筛选器方法绑定到控件的本机事件，例如

（焦点）

和

（输入）

。在filter方法中，检查传入的值是否为null或空，如果为空，则返回整个列表。这样，每次用户单击控件或更改其值时都会触发过滤器，只要用户在服务填充选项列表后至少单击控件一次，面板就会显示。根据您的使用案例，我发现当用户移动鼠标并关注控件时，服务已经交付了货物，面板打开

---

当下拉列表打开时，您希望在其中显示什么？请尝试github.com/tnr2394/autoCompleteTextbox。。它提供了大量的自定义功能。@midparse，在用户执行任何操作之前，自动完成将被上下文填充。当用户单击“自动完成”时，我希望根据文本框中已有的内容显示结果。但在您的问题中，您会问是否有方法在第一次单击时显示下拉列表，否则下拉列表将在用户键入时显示。在第一次单击时，文本框将为空。我说的对吗？@ocespedes当用户第一次单击文本框时，文本框不会为空。文本框中已经有一些文本。你能举例说明两种建议的方法吗

md-search-text="vm.searchTerm"