前几天 在这里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自动填充表单功能代码”展示了如何使用jQuery UI的Autocomplete实现表单自动填充功能,结合Ajax和本地文本文件来动态提供搜索建议。通过理解Autocomplete的工作原理和配置选项,开发者可以轻松地为...
本主题将深入探讨如何使用Ajax Control Toolkit中的AutoCompleteExtender控件在Web服务器(WEBSERVES)上实现自动填充表单的功能,以及如何从SQL Server数据库获取填充数据。 首先,`AutoCompleteExtender`是ASP...
在自动填充登录插件中,Background Script可能用于存储用户账号密码信息,并且接收Content Script发送的请求,提供必要的数据支持。同时,它也可能处理一些异步任务,如用户在其他地方更新了账号信息,需要同步到...
在酒店系统开发中,一个高效、好用的自动填充JS控件能够极大地提升用户体验,简化用户的输入操作,提高数据录入的准确性和效率。下面将详细介绍这种控件的工作原理、应用价值以及如何在实际项目中实施。 首先,自动...
3. **XMLHttpRequest Level 2**:AJAX上传文件需要XMLHttpRequest的第二版,它支持发送二进制数据,如文件。使用`FormData`对象填充的数据可以通过`send(formData)`方法发送到服务器。 在给出的`ajaxfileupload.js`...
在这个场景中,jQuery被用来自动化填写表单字段,通常与Ajax技术结合,从服务器端获取数据并在用户交互时动态填充到页面上。 首先,我们需要了解jQuery的基本用法。jQuery通过选择器找到DOM元素,然后对这些元素...
在这个场景下,"ajax文本框自动补全功能"是一个常见且实用的设计,它极大地提升了用户体验,尤其是在输入搜索关键词或者填写表单时。这种功能类似于百度搜索引擎的自动索引功能,用户在输入框中输入文字时,系统会...
本篇文章将深入探讨如何使用ASP.NET的Ajax技术实现下拉框的自动填充功能。 首先,让我们了解什么是AutoComplete。AutoComplete是一种常见的人机交互特性,它允许用户在输入文本时接收系统的实时建议。在Web应用中,...
在Web开发中,为了提升用户体验,自动填充(Autocomplete)功能被广泛应用于搜索框、表单输入等场景。jQuery库提供了一个强大的Autocomplete插件,名为jQuery UI Autocomplete,它可以帮助开发者轻松实现这种功能。...
2. 事件驱动:利用JavaScript或jQuery监听用户操作,当满足特定条件时,自动从XML数据中获取并填充表单。 3. 数据验证:在表单提交前,可对比XML数据验证表单内容的正确性,确保数据的一致性。 四、jQuery与XML的...
在IT行业中,自动填充功能是用户体验优化的重要一环,特别是在用户需要输入邮箱地址时。"自动填充email格式"的功能能够极大地提升用户输入的效率和准确性。这个功能常见于各种在线表单、登录界面以及注册页面,它...
你可以结合AJAX请求,根据服务器返回的数据填充表单: ```javascript $.ajax({ url: 'your-api-url', type: 'GET', success: function(response) { $('#yourForm').formautofill(response.data); } }); ``` #...
标题中的“日本都道府县邮编 自动填充基于jquery.jpostal.js支持”是指一个用于网页开发的功能,它能够帮助用户在输入日本地址时自动填充都道府县和邮编。这个功能是通过一个名为`jquery.jpostal.js`的JavaScript库...
2. JavaScript/jQuery代码:这部分代码将负责监听事件(如按钮点击)、获取数据(可能从服务器或本地存储)以及填充表单字段。 3. 可能的CSS样式:用于美化示例的外观。 在实际应用中,你可能会遇到以下情况: - ...
在提供的压缩包文件"jQuery-form-autofill-master"中,可能包含了一个jQuery插件或示例代码,用于自动化这个过程,简化JSON数据填充表单的操作。使用这样的插件,开发者可以更方便地实现这一功能,而无需编写大量的...
在HTML5中,`autofill`属性可以设置在`<input>`标签上,配合`autocomplete`属性,浏览器可以根据用户的浏览历史自动填充表单字段。然而,为了实现自定义的自动填充,开发者通常需要编写JavaScript代码来处理这一过程...
这种技术广泛应用于搜索引擎、表单填充、地址栏提示等领域。以下是对这个主题的详细解释: **ASP.NET** 是微软开发的一种服务器端Web应用程序框架,它允许开发人员使用.NET Framework编写动态网页。ASP.NET提供了...
在加载已存在的复杂表单数据时,可以通过Ajax请求后台,获取表单的初始值,然后填充到对应的输入框中,使用户看到已有的数据。 总结来说,"jQuery+Ajax实现的表单分页,页面复杂表单数据的加载"是一个前端开发中的...