程式師世界 >> 編程語言 >> JAVA編程 >> J2EE >> 通過JSF 2實現可重用的Ajax化組件(2)

通過JSF 2實現可重用的Ajax化組件(2)

編輯：J2EE

圖3和圖4顯示了運行中的自動完成字段。在圖3中，在字段中輸入Al之後，國家列表將縮減至使用這兩個字母開頭的名稱：

圖3.使用Al開頭的完成項目

同樣，圖4顯示了在字段中輸入Bar之後顯示的結果。列表僅顯示以Bar開頭的國家名。

圖4.以Bar開頭的完成項目

使用自動完成組件

復合組件：基礎如果您不熟悉如何實現JSF2復合組件，那麼您可以從“JSF2簡介，第2部分：模板及復合組件”這篇文章中了解基本知識。

.Locations自動完成字段是一個JSF復合組件，並應用於facelet，如清單1所示：

清單1.facelet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHtml 1.0 Transitional//EN"  
   "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd"> 
<Html XMLns="http://www.w3.org/1999/xHtml" 
      XMLns:h="http://Java.sun.com/JSf/Html" 
      XMLns:util="http://Java.sun.com/JSf/composite/util"> 
   <h:head> 
      <title>#{msgs.autoCompleteWindowTitle}</title> 
   </h:head> 
 
   <h:body> 
      <div style="padding: 20px;"> 
         <h:form> 
            <h:panelGrid columns="2"> 
               #{msgs.locationsPrompt}  
               <util:autoComplete value="#{user.country}" 
                     completionItems="#{autoComplete.countrIEs}" /> 
            </h:panelGrid> 
         </h:form> 
      </div> 
   </h:body> 
</Html>