Multiple Suggest Box with GWT

When we was creating user interface in GWT, we needed some text fields that suggest word completion to the user based on previously filled list or from database.
This feature is called SuggestBox and is already implemented in GWT. Otherwise, it is limited to only one suggestion and its user interface is very poor comparing to commonly used suggest box like Facebook search panel or Gmail destination address.

Therefore we designed a custom suggest box in GWT that allows user to type words, select a suggestion and continue with other words. It also allows the user to delete previously selected suggestions using the x button or by selecting the suggestion and deleting it.



So to start we need to create the GWT project, EntryPoint and HTML page that will hold our component. First we will do it the standard way, I used the SuggestBox class with MultiWordSuggestOracle that will supply suggestions using the standard GWT style :
What we get is a ready to use suggest box that allow user to type and select only one suggestion.

Then, in order to display multiple words in the same suggest box, we extends the composite widget and create our own MultipleWordSuggestBox based on the Div structure and styles explained in this example : http://loopj.com/jquery-tokeninput

So basically here we created a BulletList element holding a ListItem. This first item is wrapping a GWT SuggestBox and each time a value is selected from the SuggestBox, a new ListItem is created holding the selected value, and is inserted right before the SuggestBox index.

The rest of code is used to manage deleting, selecting, deselecting and keyboard events. The Last thing to do is to add custom CSS style similar to Facebook suggest box :


Finally I changed my EntryPoint class to add the new Composite widget to the root panel : RootPanel.get("root_panel").add(new MultipleWordSuggestBox()) And this is what it gives!! Enjoy :)