HTML 带有建议的文本字段

Question

我正在尝试创建一个文本字段，我可以在其中输入文本并从列表条目中获取建议（每个输入字符都会缩小范围）。从我的后端加载列表的位置。

<label>Owner:
    <input #owner (keypress)="searchOwner(owner.value)" list="owners" name="owner" /></label>
  <datalist id="owners">
    <option *ngFor="let elem in owners" value="{{elem.id}}">{{elem.name}}</option>
  </datalist>

这应该（并且确实加载了应该返回到所有者列表中的正确值。但是，它不会将列表显示为选项。我怎样才能得到这个？1

Answer 1

我在我的应用程序中使用 Vue-multiselect 来实现此功能，它对我来说效果很好。 Here is a link to check it out.

您可以做的另一件事是遍历每个选项并将它们作为 options/values 添加到您的选项列表中，这看起来就像您在上面尝试做的那样。这是 Angulars 循环选项的方式，但如果页面上没有 angular，你可能想使用 Javascript。

HTML 带有建议的文本字段

HTML textfield with suggestions

html

javascript

html-datalist