27、实践中的表单可用性：使用服务器支持的组合框

实践中的表单可用性：使用服务器支持的组合框

1. 组合框增强表单可用性

在许多 Web 应用程序中，基于另一个字段的异步服务器端数据查找支持的组合框是一种增强表单可用性的有效方式。大多数现成的 JavaScript 库中的小部件库都包含某种形式的组合框，它是文本字段和下拉列表的结合。当用户输入文本时，列表中的选项会逐渐缩小，直到只剩下一个。许多 JavaScript 库还添加了自动完成功能，会用列表中第一个元素的名称自动填充文本字段。

1.1 自动完成组合框示例：汽车品牌

以一个允许根据汽车品牌进行搜索的 Web 应用程序为例。可能的汽车品牌数量相当多，但还不至于多到不能将其发送到客户端用于选择字段或组合框。使用普通选择框的缺点是，拥有沃尔沃汽车的用户必须滚动很多页面才能找到沃尔沃的选项。而使用组合框，当用户输入 “V” 接着输入 “o” 等时，列表中的选项会减少到更易于管理的数量。如果使用自动完成功能，假设以 “V” 开头的汽车品牌只有大众和沃尔沃，用户只需输入前四个字母 “volv” 即可。

1.2 服务器填充组合框示例：汽车型号

当通过服务器端查找来填充组合框字段时，其实用性会进一步增强。以汽车选择为例，允许用户不仅按品牌还按型号搜索是一个不错的扩展。但将所有汽车品牌和型号包含在一个请求中是不切实际且浪费的，因为服务器发送的数据集会很大，而大多数用户通常最多只会选择几种不同的汽车品牌，大部分型号可能永远不会被用到。

这种情况非常适合使用 AJAX 来在每个请求中仅选择与单个汽车品牌相关的型号。每次用户更改品牌组合框的值时，会从服务器异步检索所选品牌的型号集，并更新型号组合框。例如，当用户选择沃尔沃并离开品牌