我正在使用使用 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)。
非常感谢任何想法。感谢您的宝贵时间。
最佳答案
我能想到的唯一完全不涉及 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>
关于javascript - 带有特定条款的自动完成表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36877319/