showing image+text in suggestBox()

Question

I am trying to display an icon along with text in suggestion drop down using SuggestBox and MultiWordSuggestOracle following code:

public class Suggestions implements Suggestion {

    private String suggestion;

    public Suggestions(){}

    public Suggestions(String suggestion){
        this.suggestion = new String( suggestion );
    }
    @Override
    public String getDisplayString() {
        return ( suggestion + " <img src='/images/image.png'/> " );
    }
    @Override
    public String getReplacementString() {
        return suggestion;
    }}

And in onModuleLoad function contain following code:

 MultiWordSuggestOracle oracle = new MultiWordSuggestOracle(){
          @Override
          public boolean isDisplayStringHTML() {
              return true;
          }};  
          oracle.add(new Suggestions("A").getDisplayString());
      SuggestBox suggestionBox = new SuggestBox(oracle);

Problem : html code is printed as normal text. Could you guys please suggest whats wrong with the code?

Thanx!

Answer 1

Because your Suggestion class is never used !

The multiword oracle has just the display string, and create his own Suggestion items.

Just override the methode createSuggestion in the oracle :

MultiWordSuggestOracle oracle = new MultiWordSuggestOracle(){
      @Override
      public boolean isDisplayStringHTML() {
          return true;
      }

      @Override
      protected MultiWordSuggestion createSuggestion(String replacementString, String displayString) {
         return new Suggestions(replacementString);
      }
};  
oracle.add(new Suggestions("A").getDisplayString());
SuggestBox suggestionBox = new SuggestBox(oracle);

Answer 2

Below is what I did to get image+text in suggestion drop down.

public class Suggestions implements Suggestion {

    private String suggestion;

    public Suggestions(){}

    public Suggestions(String suggestion){
        this.suggestion = new String( suggestion );
    }
    @Override
    public String getDisplayString() {
        return ( suggestion + new Image('/images/image.png') );
    }
    @Override
    public String getReplacementString() {
        return suggestion;
    }}

OnModuleLoad function is: 

MultiWordSuggestOracle oracle = new MultiWordSuggestOracle(){
      @Override
      public boolean isDisplayStringHTML() {
          return true;
      }

      @Override
      protected MultiWordSuggestion createSuggestion(String replacementString, String displayString) {
         return new Suggestions(replacementString);
      }
};  
oracle.add("A");
SuggestBox suggestionBox = new SuggestBox(oracle);