RichFaces suggestion box component

It’s end of the day Friday (and end of they year), what’s a better time than to revisit one of the original RichFaces components: rich:suggestionbox. rich:suggestionbox shows a list of values in a pop-up based on the input provided. It has an action method that takes value from an input field. In that action, you write what values to return based the input provided. The list of values returned is then shown in a pop-up. The actual suggestion box is just the pop-up, it needs to be attached to an input field.

screenshot_096

JSF page:


   
      
      
   
   
	
	   
	
	
	   
	
	
	   
	
   

As you can see above, suggestion box works just like a data table in JSF. This allows to display any number of columns, including rich content such as images. Also, for attribute is used to attached suggestion box to input field.

This is how suggest action looks inside stateBean:

public ArrayList suggest(Object input) {
   String userInput = (String) input;
   ArrayList ret = new ArrayList();

   for (State state : this.states) {
      if ((state.getName().toLowerCase()).startsWith(userInput.toLowerCase())) {
         ret.add(state);
      }
   }
   return ret;
}

input is what user entered in the browser. Use this value to filter states and return to the client to be shown inside a pop-up.

Let’s say that you need to enter the state capital into the input field instead of state. By default, the first column is the value inserted. You could move the capital column to be first but that’s not the best approach. Instead, use fetchValue attribute to specify which of the column values to set into the input field:


      
      


   ...

As the pop-up data is retrieved from the server, you might want the user to enter some minimum number of characters before sending a request to the server. To do that set minChars attribute:


      
      


   ...

There is also a client-side suggestion box called rich:comboBox.

If the suggestion box is inside a form, most likely you only want to process this component on the server. You don’t really care to process and validate any other components inside the form. In such case, use ajaxSingle=”true” on rich:suggestionbox or nest the component inside a4j:region tag as shown here:


  
      
      
  
  
   ...
  

If you are also updating anything based on value selected, you can limit updates to this region by setting renderRegionOnly=”true”. More on regions and this attribute in this post.

45 thoughts on “RichFaces suggestion box component

  1. You usually need to know which object was selected which makes this components rather difficult to use. We found combobox very limited (maybe it should have some other name like Stringbox for example).

    With suggestion box we used option usingSuggestObjects=”true” and a4j:support for getting selected object like this:

    This should really be simplified.

  2. Hi Max,
    Any thought about how to utilize selection of multiple entities on the server side?

    I’m firing an ajax request on ”onselect” event for a single selection, but don’t know how to generalize it for multiple objects selection.

    thanks
    (BTW, great blog!)
    Gilad

  3. It’s not possible to make a multi selection directly from the pop-up. You can try using token attribute – it will allow you to insert multiple values into the input field. It’s going to be string value. For example, if the token is ‘,’, then if you type ‘ca’ – you can select California, enter token and type ‘ne’ – you can then select New York. You will have this inside the input field: California, New York.

    You can try attaching a converter to the input field and convert the string value to the appropriate objects on the server. Hope this helps…

  4. Hi Max,
    End up selecting one entity at a time; having each “onselect” event trigger a server action that updates a list of the selected entities, and clean the suggestionbox’ input element.
    This way I have to add separate UI for deleting selected entities, but it’s quite intuitive overall.

    Thanks for your help,
    Gilad

  5. Hi,
    Is it possible not to have the first row automatically selected? In example I would like to type the character ‘a’ and leave the field with the TAB-Key. The result should be just the ‘a’ and not the first value of the datatable starting with ‘a’ .
    I tried around in suggestionbox.js but couldnt manage it.

    Thx for your help,
    juergen

  6. Hi Max,
    yes, a great pity, its not implemented yet. The combobox in 3.3.x have some attribute about this. But I need 3.1.x and tried to modify the javascript from the sources to implement this feature. Somehow it doesnt work properly and maybe its difficult to find the right place to modify the sources.

    I would appreciate any hint ;-)

    juergen

  7. Hi,

    I can’t find a full example on how to set the selected object in a backing bean.
    Could you help me providing some examples?

    Thanks.

  8. Hi Max !

    Help me please!

    I don’t can select object in suggestionbox!

    I have a user entity anti his county related OneToOne with DB Countries.

    In suggestion i select my country and must persist this user with a link on country_id.

    Than you!!!

  9. I’m not sure what you mean by not able to select. As for persistence, that’s outside the scope of the component. You can persist objects in the action method.

  10. One issue with it though:
    so far it’s the only RichFaces component I’ve seen which will trigger in Internet Explorer the ActiveX warning “do you want to enable ActiveX…”. That’s why I had to give up suggestionbox altogether.

  11. Hello Max,
    I am using RF 3.1.6 with JSF 1.1 on Jdeveloper 10.1.3.
    I have a problem with suggestionbox.
    When I run the JSP page and I type in letters, no results are getting displayed.
    a4j log is showing error
    debug[11:27:20,219]: call getElementById for id= suggestionbox_form:suggestionBoxId:suggest
    error[11:27:20,219]: New node for ID suggestionbox_form:suggestionBoxId:suggest is not present in response
    debug[11:27:20,220]: call getElementById for id= ajax-view-state

    When I display

    I could see the data in outputpanel. However no data is displayed in suggestionbox

    How can I resolve the issue?

    Below is the code I am using.

    Suggestion Box will suggest you states capitals names. Comma
    and square brackets could be used as suggestions separators.”

  12. My code

    Suggestion Box will suggest you states capitals names. Comma
    and square brackets could be used as suggestions separators.”

  13. @Chacko: I don’t have a project that uses RichFaces 3.1.6 (it’s rather old) and JSP to reproduce this. Use Firebug to see if there are any errors, also place a4j:log to see if there are any errors. Another thing to try is remove any optional attributes from the component and try running it.

  14. Hi Max,

    a4j log gives one error
    error[11:27:20,219]: New node for ID suggestionbox_form:suggestionBoxId:suggest is not present in response

    I couldn’t resolve or haven’t got any clue what exactly is the above error!

    Earlier I tried removing optional attributes from the component, however no luck.

    Even I tried downgrading to 3.1.5 and same errror persist.

    From the bean I am able to get the results, but suggestionbox not displaying the results.

    I am almost trying to resolve this for the past one week.

    For debugging I could send the ear file if you would want to

    Thanks
    Chacko

  15. Hi Max,

    Sorry I do not have a tomcat version, I use Jdeveloper’s Embedded OC4J.

    Are you getting any errors when trying to run the page?

    Chacko

  16. @Max : thanks for your reply
    I encounter with RTL suggestionbox when my input text style and suggestionbox
    are RTL after i select one of the option huge space is created in textbox
    and selected text goes at the end of it
    how can i overcome this ?

  17. @Max : after debugging and google searching i found out rich:suggestionbox
    does not work with apache trinidad and i’m using Richinidad (rich faces trinidad)
    i have to find another solution
    thanks in advanced

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s