JSF 2 fu: Ajax 组件

自动完成组件的使用方法已经介绍完毕。现在，您将了解它的工作原理。

自动完成组件的工作原理

自动完成组件是一个 JSF 2 复合组件，因此，与大多数复合组件相同，它是在 XHTML 文件中实现的。组件包括一个文本输入和一个列表框，以及一些 JavaScript 代码。最开始，列表框 style 是 display: none，其作用是让列表框不可见。

自动完成组件响应三个事件：

文本输入中的 keyup 事件

文本输入中的 blur (失焦) 事件

列表框中的 change (选择) 事件

当用户在文本输入中键入内容时，自动完成组件会调用每个 keyup 事件的 JavaScript 函数。该函数结合键盘输入事件，以不大于 350ms 的间隔定期调用 Ajax。因此，在响应文本输入中的 keyup 事件时，自动完成组件会以不大于 350ms 的间隔定期向服务器发起 Ajax 调用。（其作用是防止快速输入时的大量 Ajax 调用将服务器淹没。在实践中，结合事件的频率可能会稍高，但这足以演示如何在 JavaScript 中结合事件，同时这是一个非常实用的工具。）

当用户从列表框中选择项目时，自动完成组件会向服务器发起另一个 Ajax 调用。

文本输入和列表框都附加了监听程序，它们在 Ajax 调用期间完成与服务器相关的大部分有意义的工作。在响应 keyup 事件时，文本输入的监听程序会更新列表框的完成项目。在响应列表框的选择事件时，列表框的监听程序会将列表框的选中项目复制到文本输入中，并隐藏列表框。

现在，您已经了解了自动完成组件的工作原理。接下来，我们来看看它的具体实现。