SuggestBox GWT showing all options on Enter key

Question

I need to create a SuggestBox that will show all options on pressing the Enter key. I have written the following implementation, and it seems to be working fine. I would like someone to review my implementation and let me know if it will cause problems in any particular scenario. Also, the SuggestOracle to be passed to this SuggestBox should have the default suggestions set, by calling the method setDefaultSuggestions() on MultiWordSuggestOracle. Any user of my SuggestBox should be transparent to this fact. Hence I guess I will need to wrap (or extend) MultiWordSuggestOracle to do the default suggestions settings. Can you please recommend what will be a good way of doing this?

public class SuggestBoxWithAllOptions extends SuggestBox implements 
    KeyPressHandler { 
    public SuggestBoxWithAllOptions(MultiWordSuggestOracle oracle) { 
            super(oracle); 
            this.addKeyPressHandler(this); 
    } 
    @Override 
    public void onKeyPress(KeyPressEvent event) { 
            char c = event.getCharCode(); 
            int i = this.getText().length(); 
    if (c == KeyboardListener.KEY_ENTER && i == 0) { 
            /* Since the query string is null, the default suggestions 
           will get listed */ 
            this.showSuggestionList(); 
     } 
    } 
   } 

  /* Code for initializing the SuggestBox */ 
            List<String> suggestions = new ArrayList<String>(); 
            suggestions.add("Tablet"); 
            suggestions.add("Capsule"); 
            MultiWordSuggestOracle myOracle = new MultiWordSuggestOracle(); 
            myOracle.addAll(suggestions ); 
            myOracle.setDefaultSuggestionsFromText(suggestions); 
            SuggestBox mySuggest = new SuggestBoxWithAllOptions(myOracle); 

Answer 1

That looks pretty good to me. Another way is to add a button to show all suggestions. The button could be styled to look like a drop down box arrow.

public class DropDownSuggestBox extends Composite {

public DropDownSuggestBox(final SuggestBox suggestBox) {
    FlowPanel layout = new FlowPanel();
    final Button dropDownButton = new Button();
    dropDownButton.setStyleName("slate-DropdownIcon");
    dropDownButton.setText("Show Options");
    dropDownButton.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            suggestBox.setFocus(true);
            suggestBox.showSuggestionList();
        }
    });

    layout.add(suggestBox);
    layout.add(dropDownButton);

    initWidget(layout);

    setStylePrimaryName("slate-DropDownSuggestBox");
}

}

Answer 2

That approach can be problematic since the focus on the suggest box is lost when you click on the button, so people who trigger validation etc. on blur, may be disturbed by this behavior.

I recommend using this lib which was created for a real life huge application, so many practicle cases were solved due to feedback after use http://code.google.com/p/advanced-suggest-select-box/

For the first original question, you can override onkeyUp() and have do special stuff for your case and delegate to super.onKeyUp() for all the rest.

Hope it could help, Best regards, Zied Hamdi