RichFaces的suggestionBox的无名值对应的解决方案-优快云博客

本文介绍如何使用JSF与RichFaces组件库中的suggestionBox组件实现在输入框中动态显示并选择带有名值对的数据。通过自定义的解决方案实现了类似<selectOneMenu>的itemLabel和itemValue效果，确保用户界面友好且功能完整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

suggestionBox中按用户的输入动态显示相关建议，但一旦你选择了一个值，它就会填入<h:input>框中，我的需求是按用户的输入在<h:input>中显示相关的名称，而实际提交上去的值是对应的ID值，就像<h:selectOneMenu>的<h:selectItems>的itemValue 和itemLable的效果；
我没发现richFaces还有没其它的控件可以实现此功能；
不要告诉我用<rich:comboBox>
，它是一样在没有名值对应：


<rich:comboBox value="#{comboBoxBean.value}" suggestionValues="#{capitalsBean.capitalsNames}"/>

如果有更好的请告诉我；

我的解决方案是：

1：fetchValue="#{result.cid}^_^#{result.cfullname}" 选择来的是两个值；
2：οnselect="toSplit('form:selid','form:in_id');" > 在选择的时候分开再分别存放
3：用隐藏控件<<h:inputHidden value="#{myBean.obj.id}" id="in_id"/>
4：来接收ID，用<h:inputText value="#{myBean.name}" id="selid" >显示名字；

suggestionBox 的bean是基于richFaces3.2中demo中的suggestionBoxBean,用于控制显示样式之类



<h:outputText value="选择单位" />
<h:inputHidden value="#{myBean.obj.id}" id="in_id"/>
<h:inputText value="#{myBean.name}" id="selid" 
	required="true"  requiredMessage="查询单位必须输入" />
<a4j:region renderRegionOnly="true">
<rich:suggestionbox id="suggestionBoxId" for="selid"
      tokens=",[" rules="#{suggestionBox.rules}"
      suggestionAction="#{suggestionBean.autocomplete}"  var="result"
      fetchValue="#{result.cid}^_^#{result.cfullname}" first="#{suggestionBox.intFirst}"
      minChars="#{suggestionBox.minchars}"
      shadowOpacity="#{suggestionBox.shadowOpacity}"
	border="#{suggestionBox.border}" width="#{suggestionBox.width}"
	height="#{suggestionBox.height}"
	shadowDepth="#{suggestionBox.shadowDepth}"
	cellpadding="#{suggestionBox.cellpadding}"
	nothingLabel="没有对应的单位"
	onselect="toSplit('form:selid','form:in_id');" >
<h:column>
	<h:outputText value="#{result.cfullname}" />
	</h:column>									
	</rich:suggestionbox>
	</a4j:region>

toSplit()方法：

// 分割suggestionBox的ID和名称，分割符为 ^_^
function toSplit(id,inid){
						var input = document.getElementById(id).value;
						ss = input.split("^_^");
						document.getElementById(inid).value=ss[0];
						document.getElementById(id).value=ss[1];
						return true;
							}

这个解决方案是在我们老大的提示下实现的，顺便赞一下我们老大 :idea: :idea: