前几天 在这里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/
分享到:
相关推荐
jQuery自动填充表单功能代码是一款利用jQueryUI的autocomplate工具实现表单的自动填充功能,数据可通过ajax从后台获取,或者从文本文件中获取都可。
用的是ajax control toolkit里的AutoCompleteExtender来实现textbox的自动填充表单,其中自动填充表单的信息来自sqlserver数据库
Ajax-PHP-MySQL-Newsletter, 使用 Ajax PHP和MySQL在表单上注册简单的新闻稿 Ajax PHP使用 Ajax 。PHP和MySQL在表单上注册简单的新闻稿。 :如何使用运行 create_table.sql 文件以创建数据库的结构。打开 Database....
Gerrit自动填充 在GWT中,表单是使用AJAX提交的,但是浏览器的表单自动填充功能不适用于该表单,因为它们不是真实表单(没有表单标签)
以上这篇laravel 解决ajax异步提交数据,并还回填充表格的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。 您可能感兴趣的文章:laravel5.2表单验证,并显
在这些客户的支持下,OQSS团队不断进取、不断创新,坚持在软件结构、人性化、安全性方面进行提升,使OQSS更好用、更易用,功能更强大。 OQSS的适用范围 市场调查 客户反馈 科研调研 数据收集 网站调查 表单...
我试图在选择“ TeacherId” DropDownList项目后自动填充CreditTobeTakenTextBox。 我的数据库中有Teacher表,其中TeacherId是主键,并尝试检索特定老师的CreditToBeTaken。 但这不起作用。 我见过类似类型的...
前台提交信息到后台一般两种常见提交方式: Form表单提交 和 Ajax无刷新页面提交 placeholder 不是所有的input都支持...去掉chrome记住密码后自动填充表单的黄色背景: autocomplete="off" 可以加在input或者form上 下
该页面可能是带有已经填充某些数据的新表单的 HTML,也可能是确认页 面,或者是具有根据原来表单中输入数据选择的某些选项的页面。当然,在服务器上的脚本或程序处理和 返回新表单时用户必须等待。屏幕变成一片空白...
Nova Ajax选择 Ajax根据其他字段的值以及它们何时更改来填充选择字段。安装composer require dillingham/nova-ajax-select用法指定一个请求URL,还可以指定parent($attribute)来监视和触发Ajax选择: use ...
tinySelect.js是一款支持选项搜索过滤和Ajax远程加载的select下拉选择框jQuery插件。该下拉选择框插件可以搜索相关选项,可以通过Ajax调用json数据来填充下拉框,并且它支持中文,非常实用。
在这些客户的支持下,OQSS团队不断进取、不断创新,坚持在软件结构、人性化、安全性方面进行提升,使OQSS更好用、更易用,功能更强大。 OQSS的适用范围 市场调查 客户反馈 科研调研 数据收集 网站调查 表单...
等待! 该插件不再维护,可能已损坏,请改用! 重力形式中继器附加组件 Gravity Forms加载项,允许用户重复指定的字段组。 ... (在具有中继器的表单上,Ajax将被自动禁用) 简码 您可以在输入标
Ajax Form是一个jquery插件,可以通过ajax发送表单数据或通过ajax填充数据。当表单中有很多项时,您无需获取或设置其数据手册,而是使用Ajax Form可以自己完成。
此扩展程序会重新启用自动填充网站上的密码...它为许多形式启用自动填充密码,但不适用于通过AJAX提交的登录表单(这是Chrome的限制/功能)。 源代码可在https://github.com/mprobst/docomplete找到。 支持语言:English
--利用获取的数据进行表单内容的填充--> [removed] $(#soft_id).change(function(){ var softtype=$(#soft_id).find(option:selected).text(); var soft={'type_id':softtype} $.ajax( { type: 'GET', url:'/...
4.记录,存储,编辑和自动填充表单数据。===============================版本:0.8.2. - 布局更新 - 添加所有选项的复制函数版本:0.8.1. - 修复值包含'='的情况版本:0.8.0. - 用angularjs重写版本:0.7.2 - 按...
4.记录,存储,编辑和自动填充表单数据。 =============================版本:0.8.2-布局更新-为所有选项添加了复制功能版本:0.8 1-修复了值包含'='的情况版本:0.8.0-使用AngularJS重写版本:0.7.2-按名称对参数...
该表单将接收数据,然后将其传递到“最近添加的用户”部分。 如果我们添加一个新用户,它将替换前一个用户。 获取当前用户部分将点击一个api并提取其用户数据。 我们将使用我们的API,它是一个开放的API,以虚拟...