JSF 2 fu: Ajax 组件

核心提示： 实现自动完成组件 自动完成组件实现包括以下工件：一个复合组件一系列 JavaScript 函数一个用于更新完成项目的值变更监听程序我将从 清单 4 开始复合组件：清单 4. autoComplete 组件<ui:compositionxmlns="http://www.w3.or

实现自动完成组件

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

一个复合组件

一系列 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>