Angular：输入类型文本自动竞争='on'不起作用

Question

有人可以帮我解决这个问题吗？我有一个输入类型=“文本”，想要显示用户之前输入并保存的建议文本。我尝试在表单和输入级别使用 autocomplete='on' 但没有运气。下面是我的代码：

<input type="text" class="form-control form-control-sm" id="address1" formControlName="address1" autocomplete="on" maxlength="100" toUppercase
             [attr.disabled]="disabledForm?true:null"
                    />

非常感谢您的帮助。谢谢你

Answer 1

要启用在文本输入字段中向用户建议先前输入的值的功能，通常使用

autocomplete

属性。但是，此属性的行为有时在不同浏览器中可能不一致，并且也可能取决于用户设置。此外，属性

autocomplete="on"

通常意味着浏览器根据之前输入的值自动填充输入，并且它不会保存或调用之前会话期间输入的值，除非浏览器缓存了该数据。

为了在所有浏览器中提供更受控制和一致的用户体验，您可能需要考虑使用 JavaScript 实现自定义自动完成/建议功能。用于此目的的一个流行库是 jQuery UI，它提供了一个自动完成小部件。

这是一个使用 jQuery UI 自动完成的简化示例：

1. 首先，确保在 HTML 文件中包含 jQuery 和 jQuery UI 库：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

2. 然后，您可以在输入字段上初始化自动完成小部件并提供一系列建议：

$( function() {
    var availableTags = [
      "Address 1",
      "Address 2",
      "Address 3",
      // ... other addresses
    ];
    $( "#address1" ).autocomplete({
      source: availableTags
    });
} );

3. 您的 HTML 输入字段代码保持不变，但您可以删除

   autocomplete="on"

   属性，因为在这种情况下不需要它：

<input type="text" class="form-control form-control-sm" id="address1" formControlName="address1" maxlength="100" toUppercase [attr.disabled]="disabledForm?true:null" />

现在，当用户开始在

#address1

输入字段中输入内容时，他们将看到基于

availableTags

数组的建议下拉列表。您可以通过向服务器发出 AJAX 请求来检索建议，用动态数据源（例如先前输入的地址的数据库）替换该数组。