2021 年从数据库中自动完成 html 表单答案

【问题标题】：html form autocomplete from database in 20212021 年从数据库中自动完成 html 表单
【发布时间】：2021-05-09 17:06:31
【问题描述】：

关于如何自动完成某些输入和相关表单小部件的文章有很多。目标是使用数据库中的数据（通过 json api）自动完成用户输入，但仅将数据库中的 id 发送回服务器。有两种使用情况：

自古以来，jquery 自动完成功能就一直在使用，它一直在工作，但由于 jquery 已成为太多人的“害群之马”，因此我正在寻找其他可能的解决方案。

现有解决方案：

jquery-autocomplete + input.text (value) + input.hidden (id)：它可以工作，可以通过一些 css 使引导程序友好，您可以通过不给那些 input.text 命名来禁用文本发送到服务器(s) 所以只有需要的数据被传递到服务器，“相关”数据可以通过输入/选择 ids 来设置；一切正常
jquery-autocomplete + input.text (value) 带有一些 data-id 属性；和上面一样，不需要添加那些隐藏的输入，但你必须“创建”发布请求（来自 javascript）；发送 json 并使用带有一些 javascript 的 FormData 可以让您的生活更轻松（至少对于不那么复杂的表单）；另外，您可以（如果幸运的话）仅按名称访问表单输入（如果同一页面上有多个动态生成的表单，以避免 id 冲突）
bootstrap-select2 是一个不错的候选者，不幸的是我不喜欢将输入放到下拉列表中的想法；另外，我不确定您是否可以使用“相关”信息来填充其他字段

您明白了，我正在寻找类似“动态获取数据的可编辑/可搜索选择”之类的东西。除了上面列出的那些解决方案，这些天还有其他东西吗？

【问题讨论】：

【解决方案1】：

有很多选项可用于使用自动填充表单“增强”用户选择（只是因为它看起来更高级，并不一定会让用户更容易使用！请记住，这取决于您的用例，如果可以，请与最终用户一起测试）

首先，大多数人不知道 HTML5 原生 <datalist> 元素，它可以涵盖您的第一个案例，而无需任何 javascript。它当然有局限性，但到目前为止是最便宜的选择：

在兄弟之间也有不错的报道，待您确认：

如果您正在寻找更高级的控件，确实有很多可用的，但这取决于您的堆栈，例如，如果您使用 React 或 Vue 等前端框架和/或 Material Design、Twitter Bootstrap 等 UI 库，Bulma，Bumbag，（在此处插入任何 UI 库名称...）：

您可能会发现这些很方便（它们有自己的自定义选项和限制），但需要注意的是需要采用它们的 UI 库和/或框架本身。

也只是最后一个小提示：

由于 jquery 已成为太多人的“害群之马”，我正在寻找其他可能的解决方案

仅仅因为越来越多的人这样认为，并不意味着它一定适用于你自己的项目。那些日子我自己不再使用 jQuery，因为我通常使用前端框架运行，但对于后端开发人员，我认为它仍然可以提供一些好处 :) 如果它适合您，那么 IMO 并没有什么特别的问题。

【讨论】：

首先，谢谢你的大名单，我已经知道其中几个了，现在是时候看看每个人，看看我对 datalist 的了解如何，但主要问题是输入被创建为存储并显示单个值，但大多数自动完成用例都在尝试执行 id:names 映射（显示值但存储一些 id），这正是 select 所做的，但默认情况下 select 不可搜索：-P 确实，时尚糟透了，盲目跟风是不行的；但至少您必须了解趋势并了解您的代码如何适应大局，因为代码总是在不断发展
在后台不可见地映射 id 可以说是微不足道的，只要您可以可靠地维护数据库中的列表？更糟糕的情况是，如果输入本身没有为您提供 ID，您可以将值映射到您的列表（如果数据库中的名称不是唯一的，可能会更复杂）
确实，保持 id 是微不足道的，我在问题中提供了两种可能的解决方案；但它们都是一种“黑客”（添加隐藏输入，重写发布请求）；我一直在寻找一个“更干净”的解决方案，但我还没有找到，至少没有使用前端框架