Page 67 - JavaScript修炼之道

56 第四部分 表单技巧

任务 25 自动完成输入

在表单提交到服务器端之前就验证输入有不错的效果。还有更好的用户体验吗？有！那就是
在用户输入的同时做验证。将用户的当前输入和数据库中的有效且合法输入进行匹配，我们可
以给用户提供输入建议。这些建议不仅能帮助用户修正拼写等方面的错误，还能自动完成出现在
建议列表中的常用项，省去用户手动输入这些文本的麻烦，如下图所示。

①
传统上，这被称为自动完成。唯一的问题是，你要用的数据源 是预先取到客户端（以简单
数组的形式，或者用复杂点的结构化的东西，比如JSON字面量），还是就让它放在服务器上，随
用户键盘输入不断地去查询。

②
这里有一条不错的经验法则：如果数据源的数据量足够小（比如是要参考的州名 、货币单
位或者某个品牌的各种型号名称），那就把它预取到JS里（比如说在初始化页面时给它生成
JavaScript字面量），否则就应该用Ajax。使用Ajax需要调好查询频率，即使遇到网速慢或者用户
打字快也要保证良好的用户体验。

Script.aculo.us 1.8 有个不错的自动完成控件，它有大量的配置参数。我这里就用它来做自动
完成，当然要包括它所基于的Prototype库。根据数据源的位置不同，选择用Autocompleter.Local
还是用Ajax.Autocompleter（我知道这个命名不是很一致，但我也只能对此表示遗憾）。前一
种情况需要指定数据源数组，然后用一些参数（fullSearch、partialSearch、partialChars
和ignoreCase）调整匹配行为；后一种情况则是提供Ajax的基本URI以及那些Ajax相关的配置，
包括要发给服务器端的参数。

——————————
① 用来做匹配的数据。*
② 美国的各个州（state）的名称。*