HTML表单下拉数据源

时间:2013-12-16 17:06:15

标签: javascript jquery html

  • 我知道这是一个多次讨论的话题,但我无法找到我想要的东西..

问题:现在作为动态下拉框数据源的最佳做法是什么,例如:用户在下拉列表#1中选择汽车品牌,并在#2下拉列表中提供所有可用型号的概览?

就我个人而言,我看到了三个场景,谷歌搜索并没有帮助我找到最佳实践:

  1. 查询数据库中有关下拉#1的更改,让JS刷新#2并提供可用模型。
  2. 查询平面文件(JSON,XML,...),让JS刷新#2并提供可用模型。
  3. 一次加载所有数据,让JS管理选择。
  4. 这种情况或多或少是静态数据,所以每晚都可以生成平面文件而没有问题。

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

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

    谢谢!

1 个答案:

答案 0 :(得分:0)

我会说这取决于每个案例。

您应始终为数据增长做好准备;但你应该知道它应该增长 。此外,如果您的客户端和服务器端逻辑已经很好地实现,那么查询几百个寄存器并不需要花费很长时间。

停止快速数学运算:查询数据库中的某些名称。数据库有5k记录,索引很好。在这5k中,只有300符合您的标准。那么,让我们返回这300个平均有50个字符长度的名字。您有大约15kb的信息被转移。现在,在一个公共网络连接中接收的时间不到半秒。

但是,对于用户体验,必须浏览下拉列表以获得三百个名称才真的不太好。因此,将下拉列表替换为自动完成文本框可能是个好主意。想要进一步改善用户体验吗?实现偏好逻辑以了解用户最有可能选择的名称(可能基于他之前的输入和/或其他用户在前几天的输入 - 您知道最热门的名称)。

如果您主要关心的是用户体验,您必须像拥有体验的用户一样思考。试着这样思考:

  • 什么会更好?包含几百个条目的下拉列表或具有自动完成功能的文本框?
  • 也许自动完成会让用户有点无能为力,那么文本框旁边的一些示例如何?
  • 甚至更好,如果这些例子实际上是我可能会选择的那些?

回到这个问题,重复进行查询可能会很昂贵,所以稍微缓存就会很好。使用Html5的SessionStorage和LocalStorage,这真的很容易。另外,跟踪IndexedDB中的一些表也可能是一个好主意,不是吗?

用户体验的最佳实践是考虑让用户满意的内容。尽量充分利用它。