SuggestBox with Facebook-style Autocomplete?

[Matt Raible]

I'm looking for a GWT-based autocompleter that allows for a Facebook-
style presentation of the chosen item. I was able to get SuggestBox to
select multiple (comma-delimited) values using the following tutorial:

http://ljvjonok.blogspot.com/2008/10/gwt-suggestbox-how-to-make-multiple.html

However, to do formatting of the selected items, it seems like a <div>
structure needs to be used so the items can be formatted with CSS.
Since SelectBox only accepts a TextBoxBase in its constructor, I'm
guessing this is not possible out-of-the-box.

For a specific example of what I'm looking for, see the following
jQuery Plugin.

http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/

Has anyone created such a widget for GWT?

Thanks,

Matt

[Joe Cole]

Hi Matt,

We have one a similar thing for one of our applications, so it's
definitely possible. The left hand section of the suggest box provides
your highlighted search terms, and the right hand side provides
detailed preview information about the selected item, and is heavily
customised through css.

The general approach is to *unfortunately* copy and paste SuggestBox
and all it's related classes into your own package in the
com.google.gwt.user.client package, due to the package protected
nature of the existing api and final classes. You can then add all
your functionality desired into your custom version. We found that we
have to extend it in quite a few places to make it usable enough for
clients.
I know of one public enhanced suggestbox which is code.google.com/p/
kiyaa and you can look at the related commercial project
clarityaccounting which is quite impressive for a demo of how they
work.

I am not sure if the same information applies to 1.6 as we haven't
upgraded yet.

Joe

On May 29, 10:45 am, Matt Raible <mrai...@gmail.com> wrote:
> I'm looking for a GWT-based autocompleter that allows for a Facebook-
> style presentation of the chosen item. I was able to get SuggestBox to
> select multiple (comma-delimited) values using the following tutorial:
>

> http://ljvjonok.blogspot.com/2008/10/gwt-suggestbox-how-to-make-multi...
>
r> However, to do formatting of the selected items, it seems like a

<div>
> structure needs to be used so the items can be formatted with CSS.
> Since SelectBox only accepts a TextBoxBase in its constructor, I'm
> guessing this is not possible out-of-the-box.
>
> For a specific example of what I'm looking for, see the following
> jQuery Plugin.
>

> http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-tex...

[Matt Raible]

I ended up writing this widget on my own. Here's a detailed blog entry
on how I did it:

http://raibledesigns.com/rd/entry/creating_a_facebook_style_autocomplete

At the bottom of the post, you can see I still have one issue
remaining. I'm unable to give focus to an <li> and delete it with the
backspace key. If someone knows how to solve this, please let me know.

Thanks,

Matt