« Eclipse Galileo and... | Main | AWStats and Glassfis... »

RichFaces - SuggestionBox and hidden Field

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:outputText value="#{suggest.text}"/>

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:outputText value="#{suggest.firstname}" />
            <h:outputText value="#{suggest.lastname}" />
            <a4j:support ajaxSingle="true" event="onselect"
                action="#{myMB.refreshData}" reRender="data_id">
            <f:setPropertyActionListener value="#{suggest.userID}"
                    target="#{myMB.userID}" />

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.