html 2021 年从数据库中自动完成表单
html form autocomplete from database in 2021
关于如何自动完成某些输入和相关表单小部件的文章很多。目标是使用数据库中的数据自动完成用户输入（通过 json api），但仅将 id 从数据库发送回服务器。有两种使用情况：
- 简单的 ID-名称（或 ID-值）对
- 加上一些“相关”信息（例如 - 一个虚拟示例，不要判断 - select 还有 select 城市时的国家）
长期以来，jquery 自动完成一直在使用，它的工作原理，但由于 jquery 已成为太多人的“害群之马”，我正在寻找其他可能的解决方案。
现有解决方案：
- jquery-autocomplete + input.text (value) + input.hidden (id): 它有效，可以bootstrap-对一些css友好]，您可以通过不给那些 input.text(s) 命名来禁用发送到服务器的文本，这样只有需要的数据才会传递到服务器，“相关”数据可以通过 input/select id 设置；一切正常
- jquery-autocomplete + input.text (value) with some data-id attribute;和上面一样，不需要添加那些隐藏的输入，但是你必须“创建”post 请求（来自 javascript）；发送 json 并将 FormData 与一些 javascript 一起使用可以让您的生活更轻松（至少对于不那么复杂的表格）；另外，您可以（如果幸运的话）仅通过名称访问表单输入（如果同一页面上有多个动态生成的表单，以避免 ID 冲突）
- bootstrap-select2 是一个不错的选择，不幸的是我不喜欢将输入放入下拉列表的想法；另外，我不确定您是否可以使用“相关”信息来填充其他字段
你明白了，我正在寻找类似 'editable/searchable select with dynamically fetch data' 的东西。除了上面列出的这些解决方案，最近还有其他解决方案吗？
有很多选项可用于使用自动完成表单“增强”用户选择（只是因为它看起来更高级，并不一定让用户更容易使用！请记住，这取决于您的使用-案例，如果可以，请与最终用户一起测试）
首先，大多数人都不知道 HTML5 原生 <datalist> 元素，它可以涵盖这里的第一个案例，而不需要任何 javascript。
它当然有局限性，但它是迄今为止最便宜的选择：
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
兄弟之间也有不错的覆盖率，待确认是否适合你的需求：
如果您正在寻找更高级的控件，确实有很多可用的，但这取决于您的堆栈，例如，如果您使用 React 或 Vue 等前端框架 and/or a UI Material Design、Twitter Bootstrap、Bulma、Bumbag 等库（在此插入 UI 库名称...）：
- https://ant.design/components/auto-complete/
- https://material-ui.com/components/autocomplete/
- https://buefy.org/documentation/autocomplete
- https://bumbag.style/form/autosuggest/
- https://mdbootstrap.com/docs/standard/forms/autocomplete/
- https://semantic-ui.com/modules/search.html
- https://quasar.dev/vue-components/select#Filtering-and-autocomplete
- https://koolamusic.github.io/chakra-ui-autocomplete/
- https://selectize.github.io/selectize.js/（那个是jQuery基础的）
您可能会发现它们很方便（它们有自己的自定义选项和限制），需要注意的是需要采用它们的 UI 库 and/or 框架本身。
最后还有一个小提示：
since jquery has become for too many people the "black sheep" I am looking for other possible solutions
只是因为越来越多的人这样认为，并不意味着它一定适用于您自己的项目。
那些日子我自己不再使用 jQuery 因为我通常 运行 使用前端框架，但对于后端开发人员来说，我认为它仍然可以提供一些好处 :)
如果它适合您，那么 IMO 没有什么特别的问题。
关于如何自动完成某些输入和相关表单小部件的文章很多。目标是使用数据库中的数据自动完成用户输入（通过 json api），但仅将 id 从数据库发送回服务器。有两种使用情况：
- 简单的 ID-名称（或 ID-值）对
- 加上一些“相关”信息（例如 - 一个虚拟示例，不要判断 - select 还有 select 城市时的国家）
长期以来，jquery 自动完成一直在使用，它的工作原理，但由于 jquery 已成为太多人的“害群之马”，我正在寻找其他可能的解决方案。
现有解决方案：
- jquery-autocomplete + input.text (value) + input.hidden (id): 它有效，可以bootstrap-对一些css友好]，您可以通过不给那些 input.text(s) 命名来禁用发送到服务器的文本，这样只有需要的数据才会传递到服务器，“相关”数据可以通过 input/select id 设置；一切正常
- jquery-autocomplete + input.text (value) with some data-id attribute;和上面一样，不需要添加那些隐藏的输入，但是你必须“创建”post 请求（来自 javascript）；发送 json 并将 FormData 与一些 javascript 一起使用可以让您的生活更轻松（至少对于不那么复杂的表格）；另外，您可以（如果幸运的话）仅通过名称访问表单输入（如果同一页面上有多个动态生成的表单，以避免 ID 冲突）
- bootstrap-select2 是一个不错的选择，不幸的是我不喜欢将输入放入下拉列表的想法；另外，我不确定您是否可以使用“相关”信息来填充其他字段
你明白了，我正在寻找类似 'editable/searchable select with dynamically fetch data' 的东西。除了上面列出的这些解决方案，最近还有其他解决方案吗？
有很多选项可用于使用自动完成表单“增强”用户选择（只是因为它看起来更高级，并不一定让用户更容易使用！请记住，这取决于您的使用-案例，如果可以，请与最终用户一起测试）
首先，大多数人都不知道 HTML5 原生 <datalist> 元素，它可以涵盖这里的第一个案例，而不需要任何 javascript。
它当然有局限性，但它是迄今为止最便宜的选择：
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
兄弟之间也有不错的覆盖率，待确认是否适合你的需求：
如果您正在寻找更高级的控件，确实有很多可用的，但这取决于您的堆栈，例如，如果您使用 React 或 Vue 等前端框架 and/or a UI Material Design、Twitter Bootstrap、Bulma、Bumbag 等库（在此插入 UI 库名称...）：
- https://ant.design/components/auto-complete/
- https://material-ui.com/components/autocomplete/
- https://buefy.org/documentation/autocomplete
- https://bumbag.style/form/autosuggest/
- https://mdbootstrap.com/docs/standard/forms/autocomplete/
- https://semantic-ui.com/modules/search.html
- https://quasar.dev/vue-components/select#Filtering-and-autocomplete
- https://koolamusic.github.io/chakra-ui-autocomplete/
- https://selectize.github.io/selectize.js/（那个是jQuery基础的）
您可能会发现它们很方便（它们有自己的自定义选项和限制），需要注意的是需要采用它们的 UI 库 and/or 框架本身。
最后还有一个小提示：
since jquery has become for too many people the "black sheep" I am looking for other possible solutions
只是因为越来越多的人这样认为，并不意味着它一定适用于您自己的项目。 那些日子我自己不再使用 jQuery 因为我通常 运行 使用前端框架，但对于后端开发人员来说，我认为它仍然可以提供一些好处 :) 如果它适合您，那么 IMO 没有什么特别的问题。