javascript - 带有特定条款的自动完成表格

Question

我正在使用使用 Phoenix Framework(用 Elixir 编写)开发的 Web 应用程序。

我有一个目前看起来像这样的表单域:

<div class="form-group">
  <%= select f, :category_id, @categories, class: "form-control" %>
  <%= error_tag f, :category_id %>
</div>

这允许用户从下拉列表中选择一个类别(这没问题)；但是，我希望用户看到的是一个标准的文本字段，当他们开始输入时，该字段将自动完成输入的字符串以及我数据库中的类别。

与我们在 Stack Overflow 上发布问题时使用的标签字段的功能非常相似。

使用 Phoenix 应用程序执行此操作的最佳方法是什么？我试过使用 jQuery Autocomplete；但是，我想要一个更“轻量级”的解决方案(不需要 jQuery)。

非常感谢任何想法。感谢您的宝贵时间。

Answer 1

我能想到的唯一完全不涉及 JavaScript 的解决方案是 datalist .这是一个很棒的新 HTML5 元素，可以完全满足您的需求，但它的浏览器支持 isn't great (2021 年更新:现在的支持要好得多)。

如果您希望避免使用 JQuery，但仍然可以使用其他一些 JS 小部件，那么您应该看看 Awesomplete - “一个超轻量级的、可定制的、简单的、零依赖的自动完成小部件”。如果你包括最小的 JS 和 CSS 文件，它们总计只有大约 8kb。它也非常容易实现:

<input class="awesomplete"
       data-list="category1, category2, category3, category4, category5" />

它甚至可以附加到您当前的选择框(不过您必须隐藏它):

<style>
  #mylist { display: none; }
</style>

<div class="form-group">
  <input class="awesomplete" list="mylist" />
  <%= select f, :category_id, @categories, class: "form-control", id: "mylist" %>
  <%= error_tag f, :category_id %>
</div>

当然不要忘记在脑子里添加JS和CSS文件:

<link rel="stylesheet" href="awesomplete.css" />
<script src="awesomplete.min.js" async></script>