通过JSF 2实现可重用的Ajax化组件(1)(4)

自动完成组件的工作原理

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

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

◆文本输入中的keyup事件

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

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

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

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

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

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

实现自动完成组件

自动完成组件实现包括以下工件：

◆一个复合组件

◆一系列JavaScript函数

◆一个用于更新完成项目的值变更监听程序

我将从清单4开始复合组件：

清单4.autoComplete组件

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:h="http://java.sun.com/jsf/html"      
    xmlns:composite="http://java.sun.com/jsf/composite"> 
      
    <!-- INTERFACE --> 
    <composite:interface> 
      <composite:attribute name="value" required="true"/> 
      <composite:attribute name="completionItems" required="true"/> 
    </composite:interface>   
 
    <!-- IMPLEMENATION -->            
    <composite:implementation> 
      <div id="#{cc.clientId}"> 
        <h:outputScript library="javascript"   
           name="prototype-1.6.0.2.js" target="head"/> 
          
        <h:outputScript library="javascript"   
           name="autoComplete.js" target="head"/> 
        
        <h:inputText id="input" value="#{cc.attrs.value}"   
           onkeyup="com.corejsf.updateCompletionItems(this, event)" 
           onblur="com.corejsf.inputLostFocus(this)" 
           valueChangeListener="#{autocompleteListener.valueChanged}"/> 
              
        <h:selectOneListbox id="listbox" style="display: none" 
           valueChangeListener="#{autocompleteListener.completionItemSelected}"> 
          
            <f:selectItems value="#{cc.attrs.completionItems}"/> 
            <f:ajax render="input"/> 
            
        </h:selectOneListbox> 
      <div> 
    </composite:implementation>      
</ui:composition> 
 

清单4的实现部分完成了三项任务。首先，该组件发起Ajax调用以响应文本输入中的keyup事件，并通过分配给文本输入中的keyup和blur事件的JavaScript函数在文本输入失焦时隐藏列表框。

其实，该组件通过JSF2的<f:ajax>标记来发起Ajax调用来响应列表框中的change事件。当用户从列表框中进行选择时，JSF会向服务器发起一个Ajax调用，并在Ajax调用返回时更新文本输入的值。

在<div>中封装复合组件清单4中的复合组件通过复合组件的客户机标识符将其实现封装在<div>中。这样，其他组件便可通过其客户机ID来引用自动完成组件。举例来说，另一个组件可能会希望在Ajax调用期间执行或呈现一个或多个自动完成组件。

.第三，文本输入和列表框都附加了相应的值变更监听程序，因此当JSF发起Ajax调用来响应用户在文本输入中的键入操作时，JSF会调用服务器上的文本输入的值变更监听程序。当用户从列表框中选择项目时，JSF会向服务器发起一个Ajax调用并调用列表框的值变更监听程序。