前幾天 在這里https://bpcatalog.dev.java.net/nonav/ajax/textfield-jsf/design.html?看到了一個實現AJAX支持的自動填充表單, 使用這種方式可以改善用戶體驗, 舉個例子: 在填寫用戶信息的時候 要填寫用戶的籍貫, 在全國有這么省市和地區,要是僅僅提供一個下拉菜單來選擇, 在這么多選項中選擇是否很郁悶呢, 如果也可以讓用戶輸入一部分文字 然后彈出相關的選項這樣不是更好嗎,用戶使用更方便.
上面的文章介紹的比較詳細, 也是jsf的一個ajax擴展項目, 其實對于使用myfaces的用戶來說還有個更的選擇:使用MyFaces Sandbox 中的?InputSuggestAjax??
http://myfaces.apache.org/sandbox/inputSuggestAjax.html?
用法如下:
1.創建一個managed bean:
package test;
import java.util.ArrayList;
import java.util.List;
public class Bean {????
??????????? //In that function all what you had to do is to
??????????? //Specify what will be displayed in the list
??????????? //Note that the keyword is the text entered by the user
??????????? public List getSuggestedWords(String keyword) {
??????????????????????? List list = new ArrayList();
??????????????????????? list.add(keyword + " Ahmed Saleh");
??????????????????????? list.add(keyword + " Kahki");
??????????????????????? list.add(keyword + " Kourany");
??????????????????????? list.add(keyword + " Kiki");
??????????????????????? list.add(keyword + " Saleh Abouetta");
??????????????????????? list.add(keyword + " Hashim");
??????????????????????? return list;
??????????? }
??????????? public String getCurrentValue() {
??????????????????????? return currentValue;
??????????? }
??????????? public void setCurrentValue(String currentValue) {
??????????????????????? this.currentValue = currentValue;
??????????? }
??????????? String currentValue;
}
2.???? jsp 頁面代碼
<%@ taglib uri="
<%@ taglib uri="
<%@ taglib uri="
<html> <head> <title>Ajax JSF sample (InputSuggestAjax)</title> </head> <body> <f:view> ?<h:form> ? <h:outputText value="Enter your name : "/> ?? <s:inputSuggestAjax suggestedItemsMethod="#{bean.getSuggestedWords}" ??? value="#{bean.currentValue}" /> ?? <br /> ?? <h:commandButton action="" value="Submit"/> ?? <br /> ?? <h:outputText value="Your name is #{bean.currentValue}"/> ?</h:form> </f:view> </body>???? </html>? ?3.? web.xml配置 <context-param> ? <param-name>javax.faces.STATE_SAVING_METHOD</param-name> ? <param-value>client</param-value> </context-param> //Instead of server make the state saving method on the client to make it works ?4. 輸出頁面: 版本為? ?1.1.4 示例代碼提供Hazem?http://bbs.hexiao.cn/?