GWT SuggestBox with placeholder attribute

Question

I'm looking for a way to specify the placeholder attribute inside a <g:SuggestBox> element, in GWT. I know that the <input> element allows to specify that attribute, but I decided to switch to the SuggestBox element instead of the input one.

Can anyone help me?

Answer 1

Subclassing a SuggestBox would definately work.
If you don't want to create an additional class you can also easily add the placeHolder to an existing SuggestBoxby setting the attribute directly:

SuggestBox suggestBox = new SuggestBox();
suggestBox.getElement().setAttribute("placeHolder", "SOME TEXT);

Answer 2

You should create your own custom SuggestBox widget, after that you can set placeholder attribute to it. For example:

public class CustomSuggestBox extends SuggestBox {


 private String placeHolderText = "";

  public String getPlaceHolderText() {
   return placeHolderText;
  }

  public void setPlaceHolderText(String text) {
    placeHolderText = text;
    getTextBox().getElement().setAttribute("placeHolder", placeHolderText);
  }
}

So, you can set this property in UI binder.

<widgets:CustomSuggestBox ui:field="cSuggestBox"  placeHolderText="someText" />

PS: It works only in modern browser. For implementing it correctly for older browsers as well check out third-party lib wogwt, it has TextBoxWithPlaceholder class which extends TextBox:

 /**
 * A text box that displays a placeholder string when empty
 * 
 * <h3>CSS Style Rules</h3>
 * <ul class='css'>
 * <li>.wogwt-TextBoxWithPlaceholder { primary style }</li>
 * <li>.wogwt-TextBoxWithPlaceholder-placeholder { dependent style set when 
 * the placeholder is displayed }</li>
 * </ul>
 */  

In that case you can send this TextBoxWithPlaceholder's instance to SuggestBox(SuggestOracle oracle, TextBoxBase box) constructor.