`
icess
  • 浏览: 248747 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

AJAX支持的自动填充表单

阅读更多

前几天 在这里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自动填充表单功能代码.zip

    jQuery自动填充表单功能代码是一款利用jQueryUI的autocomplate工具实现表单的自动填充功能,数据可通过ajax从后台获取,或者从文本文件中获取都可。

    WEBSERVES实现自动填充表单

    用的是ajax control toolkit里的AutoCompleteExtender来实现textbox的自动填充表单,其中自动填充表单的信息来自sqlserver数据库

    Ajax-PHP-MySQL-Newsletter, 使用 Ajax PHP和MySQL在表单上注册简单的新闻稿.zip

    Ajax-PHP-MySQL-Newsletter, 使用 Ajax PHP和MySQL在表单上注册简单的新闻稿 Ajax PHP使用 Ajax 。PHP和MySQL在表单上注册简单的新闻稿。 :如何使用运行 create_table.sql 文件以创建数据库的结构。打开 Database....

    gerrit-autofill:在Gerrit(GWT)上启用自动填充的用户脚本

    Gerrit自动填充 在GWT中,表单是使用AJAX提交的,但是浏览器的表单自动填充功能不适用于该表单,因为它们不是真实表单(没有表单标签)

    laravel 解决ajax异步提交数据,并还回填充表格的问题

    以上这篇laravel 解决ajax异步提交数据,并还回填充表格的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。 您可能感兴趣的文章:laravel5.2表单验证,并显

    oqss在线表单引擎2.5版

    在这些客户的支持下,OQSS团队不断进取、不断创新,坚持在软件结构、人性化、安全性方面进行提升,使OQSS更好用、更易用,功能更强大。 OQSS的适用范围 市场调查 客户反馈 科研调研 数据收集 网站调查 表单...

    如何使用Ajax使用实体框架在ASP.NET mvc5中通过下拉列表填充表单字段

    我试图在选择“ TeacherId” DropDownList项目后自动填充CreditTobeTakenTextBox。 我的数据库中有Teacher表,其中TeacherId是主键,并尝试检索特定老师的CreditToBeTaken。 但这不起作用。 我见过类似类型的...

    HTML5表单验证特性(知识点小结)

    前台提交信息到后台一般两种常见提交方式: Form表单提交 和 Ajax无刷新页面提交 placeholder 不是所有的input都支持...去掉chrome记住密码后自动填充表单的黄色背景: autocomplete="off" 可以加在input或者form上 下

    大名鼎鼎的IBM公司 Ajax 培训资料

    该页面可能是带有已经填充某些数据的新表单的 HTML,也可能是确认页 面,或者是具有根据原来表单中输入数据选择的某些选项的页面。当然,在服务器上的脚本或程序处理和 返回新表单时用户必须等待。屏幕变成一片空白...

    nova-ajax-select:Laravel Nova的Ajax选择子选择包

    Nova Ajax选择 Ajax根据其他字段的值以及它们何时更改来填充选择字段。安装composer require dillingham/nova-ajax-select用法指定一个请求URL,还可以指定parent($attribute)来监视和触发Ajax选择: use ...

    tinySelect带搜索过滤和ajax加载功能的select下拉框插件

    tinySelect.js是一款支持选项搜索过滤和Ajax远程加载的select下拉选择框jQuery插件。该下拉选择框插件可以搜索相关选项,可以通过Ajax调用json数据来填充下拉框,并且它支持中文,非常实用。

    OQSS 在线问卷调查系统 v5.0.rar

    在这些客户的支持下,OQSS团队不断进取、不断创新,坚持在软件结构、人性化、安全性方面进行提升,使OQSS更好用、更易用,功能更强大。 OQSS的适用范围 市场调查 客户反馈 科研调研 数据收集 网站调查 表单...

    gravityforms-repeater:“重力表单”附加组件,允许用户重复指定的字段组

    等待! 该插件不再维护,可能已损坏,请改用! 重力形式中继器附加组件 Gravity Forms加载项,允许用户重复指定的字段组。 ... (在具有中继器的表单上,Ajax将被自动禁用) 简码 您可以在输入标

    Ajax Form-开源

    Ajax Form是一个jquery插件,可以通过ajax发送表单数据或通过ajax填充数据。当表单中有很多项时,您无需获取或设置其数据手册,而是使用Ajax Form可以自己完成。

    Docomplete-crx插件

    此扩展程序会重新启用自动填充网站上的密码...它为许多形式启用自动填充密码,但不适用于通过AJAX提交的登录表单(这是Chrome的限制/功能)。 源代码可在https://github.com/mprobst/docomplete找到。 支持语言:English

    Django 使用Ajax进行前后台交互的示例讲解

    --利用获取的数据进行表单内容的填充--&gt; [removed] $(#soft_id).change(function(){ var softtype=$(#soft_id).find(option:selected).text(); var soft={'type_id':softtype} $.ajax( { type: 'GET', url:'/...

    M i M-crx插件

    4.记录,存储,编辑和自动填充表单数据。===============================版本:0.8.2. - 布局更新 - 添加所有选项的复制函数版本:0.8.1. - 修复值包含'='的情况版本:0.8.0. - 用angularjs重写版本:0.7.2 - 按...

    米我「M i M」-crx插件

    4.记录,存储,编辑和自动填充表单数据。 =============================版本:0.8.2-布局更新-为所有选项添加了复制功能版本:0.8 1-修复了值包含'='的情况版本:0.8.0-使用AngularJS重写版本:0.7.2-按名称对参数...

    Practice-mini-ajax

    该表单将接收数据,然后将其传递到“最近添加的用户”部分。 如果我们添加一个新用户,它将替换前一个用户。 获取当前用户部分将点击一个api并提取其用户数据。 我们将使用我们的API,它是一个开放的API,以虚拟...

Global site tag (gtag.js) - Google Analytics