前几天 在这里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="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/sandbox" prefix="s" %>
<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/