HTML表单下拉数据源

HTML Form drop down data source

本文关键字：数据源 表单 HTML      更新时间：2023-09-26
  • 我知道这是一个讨论了很多次的话题，但我找不到我想要的东西

问题：作为动态下拉框的数据源，目前的最佳实践是什么？例如，用户在下拉框#1中选择一个汽车品牌，然后在下拉框#2中提供所有可用车型的概述？

就我个人而言，我看到了三种情况，谷歌搜索并不能帮助我找到最佳实践：

  1. 查询一个数据库的变化下拉#1，有JS刷新#2可用的模型
  2. 查询一个平面文件（JSON、XML…），使用可用的模型进行JS刷新#2
  3. 一次加载所有数据，让JS管理选择

这种情况是关于或多或少的静态数据，因此可以每天晚上生成一个平面文件，而不会出现问题。

从性能的角度来看，我认为3是最不受欢迎的，但在1到2之间，我不确定今天的数据库优化和可用带宽。

我主要关心的是最终用户体验。。

谢谢！

我认为这取决于每种情况。

您应该随时为数据增长做好准备；但您应该知道它应该如何生长。此外，如果您的客户端和服务器端逻辑实现得很好，那么查询几百个寄存器就不会花很长时间。

停下来快速计算一下：在数据库中查询一些名称。DB有5000条记录，这些记录都有很好的索引。在这5公里中，只有300公里符合你的标准。因此，让我们返回这300个名称，它们的平均长度为50个字符。您有大约15kb的信息正在传输。如今，在一个普通的网络连接中，这只需要不到半秒的时间就可以接收到。

然而，对于用户体验来说，必须在下拉列表中浏览三百个名字真的不太好。因此，用下拉列表代替自动完成文本框可能是个好主意。想进一步提高用户体验吗？实现一个偏好逻辑，以知道用户最有可能选择什么名字（可能基于他之前的输入和/或其他用户最近几天的输入——你知道，最流行的名字）。

如果你主要关心的是用户体验，你必须像拥有体验的用户一样思考。试着这样想：

  • 还有什么更好的呢？一个有几百个条目的Dropdownlist还是一个具有自动完成功能的Textbox
  • 也许自动完成会让用户有点不知所措，那么在文本框旁边列出一些例子怎么样
  • 更好的是，如果这些例子真的是我可能会选择的呢

回到问题上来，重复执行查询可能会很昂贵，所以有一点缓存会很好。有了Html5的SessionStorage和LocalStorage，这真的很容易做到。此外，跟踪IndexedDB中的一些表也是一个好主意，不是吗？

用户体验的最佳实践是思考什么能让用户满意。尽量充分利用它。

相关文章：