« 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: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

| Kommentare [14]

Kommentare:

Do you mind posting the code for themyDB bean including the refreshData method?

Gesendet von wizzy am Oktober 12, 2009 at 07:41 AM GMT #

Do you mind posting the code for the myDB bean including the refreshData method?

Gesendet von wizzy am Oktober 12, 2009 at 07:42 AM GMT #

The refreshData method starts a simple sql search for the selected entry. Like: SELECT first,last FROM userlist WHERE id='" + userID + "' This is to add the values from the table into my business object. I display this data in a separate section with the ID "data_id". This was the reason why I did a rerender.

Gesendet von 88.217.30.150 am Oktober 12, 2009 at 08:43 PM GMT #

Thank you very much Ralph. Worked just fine.

Gesendet von Sandro Mancuso am Oktober 20, 2009 at 05:00 PM GMT #

Sorry I have to bother you again. I havent been successful with the rich:suggestbox. I can imagine your method is elegant. I am developing a simple application to capture the data on the attendance of patients to a clinic and I need the diagnosis(ICD 10) to be captured by the user of the system. Meanwhile the ICD 10 is contained in the database and the users are not too good with it. I want the user to type a word and the system display a suggestion irrespective of the location of the typed letter/word. Please assist.

Gesendet von wizzy am Oktober 24, 2009 at 02:13 PM GMT #

I am using seam entity query framework to pull the icd 10 diagnosis and code

Gesendet von Wizzy am Oktober 24, 2009 at 02:15 PM GMT #

hi Wizzy, did you not succeed with the richfaces help about suggestion box? http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/rich_suggestionbox.html The solution I describe here is maybe something special for an individual problem. So maybe my solution leads you into the wrong direction? Sorry that I can not help you in this way.

Gesendet von Ralph am Oktober 26, 2009 at 02:00 PM GMT #

Sincerely I think yours is good. I didnt follow it completely because I wasnt sure about rhe refreshData method. I will try and stick to your method and ssee how it turns out. I am in the clinic seeing some patients. I will try aafter that. But could you please post the refreshData method or better still the whole of the myDB bean? Thank u

Gesendet von wizzy am Oktober 26, 2009 at 05:53 PM GMT #

Sincerely I think yours is good. I didnt follow it completely because I wasnt sure about rhe refreshData method. I will try and stick to your method and ssee how it turns out. I am in the clinic seeing some patients. I will try aafter that. But could you please post the refreshData method or better still the whole of the myDB bean? Thank u

Gesendet von wizzy am Oktober 26, 2009 at 06:13 PM GMT #

Ralph, thank you for posting this approach. The only problem I'm facing with it is, that it will not show previously selected values, because the inputText, that is presented to the user, is not bound to any ManagedBean-property. So when I load a record, that was previously saved with a value, this value will not be shown. cheers, Steffen

Gesendet von Steffen am Januar 21, 2010 at 07:05 AM GMT #

Hi Steffen, yes your are right. This approach only works if the suggestion-input field plays a role of a search field. And you display the last user selected result in a separate section. And typical you will need a delete button also. In my case the search phrase from the suggestion box is nothing which my application should save for later processing.

Gesendet von ralph am Januar 26, 2010 at 08:37 AM GMT #

hey u would have got it with rich:suggest box itself if u would have used width="150" n height="150" attributes.

Gesendet von kiran20v am Februar 02, 2010 at 04:36 AM GMT #

thank you very much! I had the same problem with you and followed your suggestions. It works! Thank your for sharing!

Gesendet von sherry am Februar 12, 2010 at 10:54 PM GMT #

This blog really helped me thanks. If you are using Seam, where the transaction and persistence context is extended to the view, you can use the suggestion box to select an entity directly. Thus, it will choose the object from the page. The example is to select a city with a suggestion box. - the suggestCities method does the filter - there is no value for the input text, it is just used as a search - the f:setPropertyActionListener uses the selected city and passes it to the bean attribute citySelection.

Gesendet von Nirav Assar am Juni 04, 2010 at 05:04 PM GMT #

Senden Sie einen Kommentar:
  • HTML Syntax: Eingeschaltet