Today I was faced with a problem implementing a suggestionbox in my JSF web application using RichFaces. There are a lots of examples and well documented api in the RichFaces Developer Guide. But my problem was that the seach phrase the user types into the input field was only for searching in the backend. After the user select one entry form the suggegstion box I need to set an internal key into a property of my BackingBean. But this key should not be shown to the user. So the typical examples did not work for me:
<h:inputText value="#{bean.property}" id="suggest"/>
<rich:suggestionbox for="suggest" suggestionAction="#{bean.autocomplete}" var="suggest">
<h:column>
<h:outputText value="#{suggest.text}"/>
</h:column>
</rich:suggestionbox>
The solution for me was to left the value binding of the input component. Instead of that I use the f:setPropertyActionListener to update my backing bean property. So I was able to display user-friendly values from my backend. After user select one entry I store the key of that entry into my backing bean.
<h:inputText id="suggest_input" />
<rich:suggestionbox for="suggest_input" minChars="1"
fetchValue="" nothingLabel="no entry found"
suggestionAction="#{myMB.suggestData}" var="suggest">
<h:column>
<h:outputText value="#{suggest.firstname}" />
</h:column>
<h:column>
<h:outputText value="#{suggest.lastname}" />
</h:column>
<a4j:support ajaxSingle="true" event="onselect"
action="#{myMB.refreshData}" reRender="data_id">
<f:setPropertyActionListener value="#{suggest.userID}"
target="#{myMB.userID}" />
</a4j:support>
</rich:suggestionbox>
myMB is my BackingBean which processes the SQL Data lookup with the method "suggestData". The user enters first or last name and my suggestData method did a SQL search using some LIKE statements.
public ArrayList<UserData> suggestData(Object event)
throws SQLException {
ArrayList<UserData> list = new ArrayList<UserData>();
String sPref = event.toString();
int iPref = -1;
sQuery = "SELECT patID,firstname,lastname FROM userlist "
+ " WHERE firstname LIKE '"
+ sPref
+ "%' OR lastname LIKE '"
+ sPref
+ "%' "
+ " ORDER BY lastname ASC";
.....
........
The BackingBean holds also the userID which is an internal primary key. But the suggestData method returns an Array of userData containing the First, Last and userID. But the userid is not displayed in the suggestionbox. When the user selects an entry the a4j:support Ajax Action is triggerd whid did some rerendering (but this is not the trick). The trick is to use the f:setPropertyActionListner to update the userID property form my backing bean myMB. The inputText component is not bound to any value of my backing beans. So this is a simple search input field.
Maybe this example could be useful for someone.
Posted at 05:45PM Aug 14, 2009
Posted by: Ralph
Category: General
Posted by wizzy on October 12, 2009 at 07:41 AM GMT #
Posted by wizzy on October 12, 2009 at 07:42 AM GMT #
Posted by 88.217.30.150 on October 12, 2009 at 08:43 PM GMT #
Posted by Sandro Mancuso on October 20, 2009 at 05:00 PM GMT #
Posted by wizzy on October 24, 2009 at 02:13 PM GMT #
Posted by Wizzy on October 24, 2009 at 02:15 PM GMT #
Posted by Ralph on October 26, 2009 at 03:00 PM GMT #
Posted by wizzy on October 26, 2009 at 06:53 PM GMT #
Posted by wizzy on October 26, 2009 at 07:13 PM GMT #
Posted by Steffen on January 21, 2010 at 08:05 AM GMT #
Posted by ralph on January 26, 2010 at 09:37 AM GMT #
Posted by kiran20v on February 02, 2010 at 05:36 AM GMT #
Posted by sherry on February 12, 2010 at 11:54 PM GMT #
Posted by Nirav Assar on June 04, 2010 at 05:04 PM GMT #
Hey,
Thanks a lot for this. I've been racking my brain the whole afternoon looking for a workaround! Keep up the good work!
Posted by Ken on February 11, 2013 at 02:07 PM GMT #