首次单击文本框时如何显示自动完成下拉菜单？答案

【问题标题】：How to show autocomplete drop-down when first clicking in text box?首次单击文本框时如何显示自动完成下拉菜单？
【发布时间】：2026-01-10 21:00:01
【问题描述】：

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

【问题讨论】：

当它打开时你想在下拉菜单中显示什么？
试试 github.com/tnr2394/autoCompleteTextbox.. 它提供了很多自定义。
@midparse，在用户采取任何行动之前，自动完成功能会填充上下文。当用户点击自动完成时，我想根据文本框中已有的内容显示结果。
但是在您的问题中，您要问是否有办法在第一次点击时显示下拉菜单，否则下拉菜单将显示为用户类型。在第一次单击时，文本框将为空。我说的对吗？
@ocespedes 当用户第一次点击文本框时，文本框不会为空。文本框中已经存在一些文本。

标签： angularjs angular-material md-autocomplete

【解决方案1】：

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

md-min-length="0"

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

控制器

vm.searchTerm = null

HTML：

md-search-text="vm.searchTerm"

【讨论】：

【解决方案2】：

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

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

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

我有两个解决方案：

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

【讨论】：

你能举例说明两种建议的方式吗

【解决方案3】：

看起来网站上的演示按您的预期工作。 https://material.angularjs.org/latest/demo/autocomplete

【讨论】：

【解决方案4】：

对于 Angular 2 和 Material 2，将控件的 valueChanges() observable 上的 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() 来设置焦点列表，使其也被某些东西过滤。

【讨论】：

【解决方案5】：

只需添加以下行

md-min-length="0"

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

【讨论】：