`
yhman
  • 浏览: 12375 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

Suggestion component using

阅读更多
給自己看的:

suggestionDemo.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j" xmlns:s="http://richfaces.org/s">
	<h:form id="form1">
		<s:div>this is a suggestionBox example
	     <br />
	     input code: pref like X or 1,2,3;
	     <br />
	     input name: pref like 三 ;
	    </s:div>
		<br />
		<h:panelGrid columns="4">
			<h:outputText value="Code:" />
			<h:inputText value="" id="codeId" />
			<h:outputText value="Name:" />
			<h:inputText value="" id="nameId" />
		</h:panelGrid>
		<ui:include src="/common/suggestTemplate.xhtml">
			<ui:param name="height" value="150" />
			<ui:param name="width" value="150" />
			<ui:param name="renderedCodeId" value="codeId" />
			<ui:param name="renderedNameId" value="nameId" />
			<ui:param name="filedCode" value="CODE_ID" />
			<ui:param name="filedName" value="DESC_C" />
			<ui:param name="tableName" value="SC_CODE" />
			<ui:param name="showCode" value="#{rich:element('codeId')}" />
			<ui:param name="showName" value="#{rich:element('nameId')}" />
			<ui:param name="autoCompleteAction" value="#{suggestAction}" />
		</ui:include>
	</h:form>
</ui:composition>


suggestTemplate.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">

	<h:panelGroup>
		<!-- select name show code -->
		<h:inputHidden value="#{filedCode}" binding="#{autoCompleteAction.filedCode}"/>
		<h:inputHidden value="#{filedName}" binding="#{autoCompleteAction.filedName}"/>
		<h:inputHidden value="#{tableName}" binding="#{autoCompleteAction.tableName}"/>
		<rich:suggestionbox height="#{height}" width="#{width}" var="_result"
			for="#{renderedCodeId}" id="suggestion"
			suggestionAction="#{autoCompleteAction.autocomplete}"
			nothingLabel="No data found" fetchValue="#{_result.showCode}"
			usingSuggestObjects="true" limitToList="true"  bypassUpdates="true"
			onobjectchange="#{showName}.value= #{rich:component('suggestion')}.getSelectedItems().pluck('showName')">
			<h:column>
				<h:outputLabel value="#{_result.showCode}"/>
			</h:column>
			<h:column>
				<h:outputLabel value="#{_result.showName}" />
			</h:column>
		</rich:suggestionbox>
		<!-- select data show name  -->
		<rich:suggestionbox height="#{height}" width="#{width}" var="_result"
			for="#{renderedNameId}" id="suggestion_name"
			suggestionAction="#{autoCompleteAction.autocomplete}"
			nothingLabel="No data found" fetchValue="#{_result.showName}"
			usingSuggestObjects="true" limitToList="true" bypassUpdates="true"
			onobjectchange="#{showCode}.value= #{rich:component('suggestion_name')}.getSelectedItems().pluck('showCode')">
			<h:column>
				<h:outputLabel value="#{_result.showCode} " />
			</h:column>
			<h:column>
				<h:outputLabel value="#{_result.showName}" />
			</h:column>
		</rich:suggestionbox>
	</h:panelGroup>
</ui:composition>

分享到:
评论
1 楼 zjx6820 2010-11-19  
    

相关推荐

    search-suggestion-component

    在IT行业中,搜索建议组件(Search Suggestion Component)是一个常见的前端功能,主要用于提高用户体验和搜索效率。这个组件通常会在用户输入关键词时动态显示与输入相关的建议列表,帮助用户快速找到他们可能正在...

    Custom Suggestion Box Component-开源

    【Custom Suggestion Box Component-开源】是一个针对JavaServer Faces (JSF)框架的自定义组件,它是Richfaces库中建议框组件的增强版本。Richfaces是一个流行的开源项目,提供了丰富的AJAX功能和UI组件,使得开发者...

    suggestion

    标题中的“suggestion”通常指的是在输入法或者搜索引擎中出现的智能提示功能,它能够根据用户输入的部分文字,预测并显示可能的完整词汇或短语,以提高输入效率。在这个场景下,描述提供了关于这个“suggestion”...

    Suggestion.gif

    Suggestion

    百度地图步行导航+POI检索+Suggestion提示

    在Android开发领域,百度地图API是一个强大的工具,它为开发者提供了丰富的功能,包括步行导航、POI(Point of Interest)检索以及Suggestion提示。本文将深入探讨这些关键知识点,并结合`android studio 2.3.2`版本...

    flex suggestion组件(支持拼音)自动提示,自动补全

    "flex suggestion组件(支持拼音)自动提示,自动补全"是一种常见的功能,它极大地提高了用户输入的效率,尤其对于中文输入场景更为实用。这个组件的设计灵感可能来源于百度搜索等常见搜索引擎的搜索框功能,它能够...

    BaiduSuggestion:JavaScript实现百度搜索suggestion功能

    BaiduSuggestionJavaScript实现百度搜索suggestion功能百度搜索suggestion功能增强了用户体验,现在很多带有搜索功能的网站都会有类似搜索suggestion功能,用以增强用户体验。暑假的时候试着做了一个百度搜索...

    v-tag-suggestion:具有预输入功能的简单标签组件

    v标签建议具有预输入功能的简单标签组件 :keyboard: 通过npm安装npm install vue-tag-suggestion导入并注册您要使用的位置import vue-tag-suggestion from ' vue-tag-suggestion 'components: { vue-tag-suggestion ...

    ng-suggestion:灵活的AngularJS提前输入自动完成建议预测搜索指令

    灵活的AngularJS提前输入/自动填充/建议/预测搜索指令依存关系ng-建议的设置使用Bower安装: bower install ng-suggestion --save在您的应用程序中包含js / ng-suggestion.min.js。 您可能还希望包含css / ng-...

    AMZ Suggestion Expander-crx插件

    语言:English chrome扩展以扩展亚马逊搜索栏中显示的搜索建议数。 为亚马逊卖家! 该Chrome扩展通过显示Amazon在您输入的关键字之前和之后,亚马逊搜索栏中显示的搜索建议的数量展开。 这使得正在寻找新产品的努力...

    Marriage Suggestion Program - Android Studio

    综上所述,"Marriage Suggestion Program - Android Studio"项目涵盖了Android开发的多个重要方面,包括UI设计、数据管理、算法实现、网络通信以及测试和发布流程。开发者在实践中可以深入学习和掌握Android开发的全...

    using jquery implement web shell

    using jquery implement web shell, so you could use it on your project, to get all the thing you want, and modify the DOM on different browser. now it is the V1 version,in the future , I will make it ...

    apple.com-style_suggestion_search.zip

    描述中的“suggestion 自动完成”进一步确认了这是一个用于实现自动填充或智能搜索建议的系统。 在实际的IT开发中,这种功能通常用于提升用户体验,当用户在搜索框输入关键词时,系统会根据已有的数据提供可能的...

    Huge Amazon Search Suggestion Expander-crx插件

    语言:English 巨大的Amazon&KDP搜索建议扩展器和一键下载。 此扩展将使您对FBA产品和KDP书籍市场的亚马逊关键词研究变得更加轻松和快捷。 只需开始在搜索栏中输入关键字,它就会非常Swift地吸引Amazon推荐的大量...

    Discord-Bot-Suggestion

    本项目名为"Discord-Bot-Suggestion",显然关注的是如何创建一个能够处理用户建议的Discord机器人。这个项目很可能使用了JavaScript作为编程语言,因为标签明确指出了"JavaScript"。 在构建一个基于JavaScript的...

    AMZ建议扩展器「AMZ Suggestion Expander」-crx插件

    Chrome扩展程序可扩展亚马逊搜索栏中显示的搜索建议数量。 对于亚马逊卖家!此Chrome扩展程序通过显示在您输入的关键字之前和之后Amazon会建议的关键字,来扩展显示在Amazon搜索栏中的搜索建议的数量。...

    ajax实现仿百度搜索提示(suggestion)

    **Ajax 实现仿百度搜索提示(Suggestion)** 在网页开发中,为了提供更好的用户体验,我们经常需要实现类似百度搜索的实时提示功能。这个功能在用户输入查询词时,能够实时展示与输入相关的建议,无需点击搜索按钮...

    vue-suggestion:Vue建议列表输入https

    npm install vue-suggestion 将插件添加到您的应用中: import Vue from 'vue' import VueSuggestion from 'vue-suggestion' Vue . use ( VueSuggestion ) 使用vue-suggestion组件: &lt; vue-suggestion :...

    FlexATX Thermal Design Suggestion

    FlexATX Thermal Design Suggestions FlexATX是一种小型化主板规格,设计用于在有限空间内提供高性能计算能力。这种板型是标准ATX主板的一个变体,适用于需要节省空间的嵌入式系统、工业计算机和服务器等应用。...

Global site tag (gtag.js) - Google Analytics