`
likaidalian
  • 浏览: 53979 次
社区版块
存档分类
最新评论

aui-autocomplete [ 二 ] 验证未通过保留输入值

js 
阅读更多
<%
long myUserId = ParamUtil.getLong(request, "myUserId",themeDisplay.getUserId());
String myUserName = ParamUtil.getString(request, "myUserName", themeDisplay.getFullName());

PortletRequest portletRequest = (PortletRequest)request.getAttribute(JavaConstants.JAVAX_PORTLET_REQUEST);
if(!SessionErrors.isEmpty(portletRequest)){
	myUserId = ParamUtil.getLong(request, "myUserId");
	myUserName = ParamUtil.getString(request, "myUserName");
}
%>

<aui:script>
AUI().ready('aui-autocomplete', function(A) {
	var states = <%= XXXXUtil.getXXXXXXX() %>;
	
	var autoComplete = new A.AutoComplete(
		{
			contentBox: '#demo',
			dataSource: states,
			matchKey: 'name',
			typeAhead: true,
			autoHighlight: true,
			forceSelection:true,
			queryMatchCase:false,
			queryMatchContains:true,
			
			schema: {
				resultFields: ['key', 'name', 'email']
			},
			on: {
						'itemSelect': function(event) {
                            var key = this._elCurListItem._resultData.key;
							var name = this._elCurListItem._resultData.name;

							this.inputNode._node.value = name;
							$( "#<portlet:namespace />myUserId" ).val(key);
							$( "#<portlet:namespace />myUserName" ).val(name);
                        },
                        
                        'selectionEnforce': function(event) {
							this.inputNode._node.value = '';
							$( "#<portlet:namespace />myUserId" ).val('');
							$( "#<portlet:namespace />myUserName" ).val('');
						}
                }
		}
	);
	
	//override the list format 
	autoComplete.formatResult =  function(result, request, resultMatch) {
		return (resultMatch  +  '<br>'+ result.email+ '<br>&nbsp;&nbsp;') || '' ;
	};
	
	autoComplete.render();
	
	autoComplete.inputNode._node.value = '<%=myUserName %>';
	$( "#<portlet:namespace />myUserId" ).val('<%=myUserId %>');
	$( "#<portlet:namespace />myUserName" ).val('<%=myUserName %>');
							
});
</aui:script>


<div id="demo"></div>
<input type="hidden" id="<portlet:namespace />myUserId", name="<portlet:namespace />myUserId" value="<%= myUserId %>" />
<input type="hidden" id="<portlet:namespace />myUserName", name="<portlet:namespace />myUserName"  value="<%= myUserName %>"/>

分享到:
评论

相关推荐

    原生js Aui-core结合css3 transform属性制

    Aui-core是一个基于原生JavaScript的库,它旨在简化前端开发,提供了一些实用的工具和功能。在这个项目中,我们看到Aui-core与CSS3的`transform`属性相结合,来实现更丰富的视觉效果和动态交互。 `transform`属性是...

    aui-artDialog-6.0.2 requireJS修改版

    总的来说,aui-artDialog-6.0.2通过requireJS的AMD规范,实现了对话框组件的异步加载,优化了资源管理,提升了Web应用的性能。这对于开发者来说,意味着更少的代码维护成本,更快的页面响应速度,以及更好的用户体验...

    aui-gridx:只是另一个角度网格

    ##Aui-gridx 概述Aui gridx(angularUI-gridx) 是一个强大的基于 AngularJS 的网格小部件。 它是轻量级、易于配置、快速渲染和原生树支持。 目前,它为您提供了以下功能排序分页树单元格格式器和装饰器 此外,aui-...

    用Aui-core实现的图片3D 360度旋转JS特效

    本项目涉及的是一个使用Aui-core库实现的图片3D 360度旋转效果,它允许用户从各个角度查看图片,增强视觉体验。这种技术常用于产品展示、虚拟现实场景以及互动媒体设计等领域。 首先,我们要理解3D旋转的概念。在...

    aui-artDialog

    artDialog是一个轻巧且高度兼容的javascript对话框组件,可让你的网页交互拥有桌面软件般的用户体验。 功能: 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭、...

    AUI在线文档

    - **布局容器**:AUI提供了`.aui-content`、`.aui-card`等布局容器类,便于快速组织页面结构。 - `.aui-content`: 基础布局容器,默认背景色为白色。 - `.aui-card`: 圆角容器,自带10px外边距,适用于卡片式布局...

    aui-artDialog弹出框

    artDialog —— 经典、优雅的网页对话框控件。 支持普通与 12 方向气泡状对话框 完善的焦点处理,自动焦点附加与回退 支持 ARIA 标准 面向未来:基于 ... 很漂亮的弹出框,支持IE、FF、Chrome,附带了很多例子供学习。

    aui-tab底部选项卡关联内容且让内容随之切换

    移动框架:aui的底部导航栏tab,关联内容footer_bar_frm以及完成选项卡的切换功能。在官网给出的例子基础上,增加关联内容,实现选项卡切换内容随之切换的功能。这是完整开发例子源码包,直接浏览器预览即可看到完整...

    jQuery-购物商城图片滚动代码.zip

    &lt;div class="aui-sale-time"&gt; &lt;div class="aui-sale-title"&gt;限时秒杀 &lt;div class="aui-sale-second"&gt;FLASH DEALS &lt;div class="aui-sale-icon-sd"&gt; &lt;div class="aui-sale-ends"&gt;本场距离结束还剩 ...

    超流畅漂亮的图片3D旋转滚动JS特效代码

    "Aui-core-1.42-min.js"是一个压缩过的JavaScript库,很可能包含自定义的函数和方法,用于处理图片的3D变换、动画效果以及用户交互。在这个库中,开发者可能使用了WebGL或者CSS3的3D变换来实现3D效果。WebGL是一种...

    进销存手机版管理系统(aui+vue)

    进销存手机版管理系统是一款基于AUI和Vue.js技术构建的应用,专为移动设备设计,旨在高效管理企业的库存、采购和销售活动。系统采用AUI(可能是AlloyUI或其他以A开头的UI框架)作为前端界面组件库,结合Vue.js的响应...

    RPi-AUI:这是配置树莓派的基本介绍

    树莓派-AUI v6.2 树莓派配置基本介绍 安装 Raspberry-Pi-AUI 的步骤: ...aui-oc 超频用户界面 aui-userm 用户管理界面 aui-util 实用程序管理器用户界面 如何贡献? 看看 笔记 获取错误。 执行: sudo

    jQuery招聘网站左侧导航分类菜单代码.zip

    $('.aui-content-main .aui-content-menu').hover(function(){ $(this).addClass('active').find('s').hide(); $(this).find('.aui-content-menu-dow').show(); },function(){ $(this).removeClass('active')....

    wordpress-aui-theme

    在"wordpress-aui-theme-master"这个压缩包中,你可能会找到以下文件和文件夹: - `style.css`:主题的主要样式文件,定义了页面的外观和布局。 - `functions.php`:包含主题的PHP函数,用于扩展WordPress的功能。 ...

    蓝色风格移动端前端框架aui,可媲美weui

    AUI,全称为"Aurora UI",是一个专为移动端设计的前端框架,以其蓝色为主色调,赋予了界面清新、专业的视觉效果。AUI的设计理念是提供...通过`aui-master`,你可以深入了解AUI的架构,进一步提高你的移动端开发能力。

    AUI Debugger-crx插件

    源在Https://bitbucket.org/200ok/aui-debug上可用,与AUI 5.1相同的许可证,并且可能被叉。 ---- 使用AUI构建的接口调试工具。 功能包括: - 识别当前页面中的AUI组件 - idenfity问题,如弃用组件的使用,不正确的...

    AngularJS_AUI库

    例如,使用AUI的表单组件,开发者只需编写少量代码就能创建出功能完善的表单,同时表单验证和数据处理也能自动完成。此外,AUI的网格组件则能帮助开发者轻松构建动态数据展示和交互,这对于数据分析和管理类应用来说...

    aui:aui移动端UI框架

    aui移动端UI框架简介aui 是一套基于原生javascript开发的移动端UI框架。包含常用js API(如:字符...link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/&gt;&lt;scri

Global site tag (gtag.js) - Google Analytics