New component: Autocomplete for TextField

General
1

I implemented simple auto complete feature for the TextField.

You can trigger the auto complete feature by pressing a user defined key combination (by default ALT-Space) to fetch suggestions for current cursor position from server.

The AutoComplete component extends the base TextField component and adds Suggester interface to retrieve suggestions for current cursor position. The suggestions are returned in description-value pairs so that the the items in suggestion box can have more verbose descriptions than the actually inserted value.

Here is the jar file together with brief instructions:

http://dev.itmill.com/svn/incubator/AutoComplete/

A more complete sample application implementing suggestions for Locale names can be found here:

AutoCompleteSampleApplication.java

I try to follow the “release early” principle here and therefore there a some limitations in this implementation that I wish to solve later:

  • The position / size of suggest box cannot be configured
  • Arrow key repeat (hold) is not working correctly in suggestion box
  • Cannot reliably bind to CTRL-Space (and some other) familiar key combination
  • Probably (not tested this) requires gwt-user.jar n WEB-INF/lib
  • The suggester cannot replace text in TextField (for example change caps)

No online demo yet. Sorry.

2

Hi,

I’m currently working with the Vaadin version 6.2.6.

What I try is, to create a TextField with an autocomplete functionality.
The TextField itself must be a one row field and while pressing some keys, it should show some results.
The results should be calculated on each new character (keyup).

So my main question is, how can I execute some logic when the user presses a key on the keyboard within a TextField?
How do I register a KeyListener (ex. onKeyUp) on a TextField? Is this somehow possible? I couldn’t add such a listener.

My second question is, how can I create a suggestionbox with the results? I need to display it somewhere and fill it with results and give the user the possibility to navigate through the results and select one. Also, the user must be able to continue entering new characters which will change the result set.

I do not want to use the ComboBox component, as I don’t have a static list of results. The results will be retrieved from a fulltext index and will be recreated on each keypress.

Any answer to any of my question wouild help.
Thanks.

3

To get an event on every keypress by using the
SuperImmediateTextField
 by Henrik. It sends an event to the server after each keypress (or after a delay if you want so).

You could have a layout below the textfield to show the results of the search, but that would maybe not be visually so nice. You could take a look at GWT and build your own component if your not afraid to dive into that area. The component would need a VTextField (client side of TextField) and a VOverlay (popup as in the Select). From there on you could easily add a KeyUpListener to the VTextField that would send events to the server, and the server could send back data that you would fill into a layout inside the VOverlay.

Feel free to ask of more details if you decide to try out this path and hit some obstacles.

4

Currently you cannot do at the server-side and you must implement a widget for that one and query the data from server. That is what I did with the
VAutoCompleteTextField.java
 (client-side) and
AutoCompleteTextField.java
 (server-side). And I would say this was relatively easy.

The positioning based on the cursor position is the hardest part as there is no direct API for that. Otherwise you can copy the code (or the just the idea) from the
VAutoCompleteTextField.java
 for this too.

5

Hi,

I am using the
SuperImmediateTextField
. It is working just fine.

My only obstacle was the newer Vaadin Version that I am using (6.2.6). The component didn’t work out-of-the-box, so I had to change the code a little bit.

I had to:

  • Remove the getTag() method, because it hat compile errors due to API changes (getTag() is deprecated now)
  • Instead, I added the annotation “@ClientWidget(value = VSuperImmediateTextField.class)” to the class
  • Then, I adapted the ComponentsApplicationWidgetset class in the sub-package “client”

Now I can use the text field and execute some actions on key events. Great!!!
By now, I’m displaying a windows with a listbox when the user enters some characters. Depending on the input, the elemets of the listbox changes. So it works as I expected.

What I didn’t understand is the steps to perform, when adding a custom widget or many custom widgets to my application.
For example, I have added this SuperImmediateTextField and it has a “ComponentsApplicationWidgetset.gwt.xml” with the new entry point. That’s OK. (Do I really need this *.gwt.xml file?)
But what if I add another widget and another one? Is there a good description, how this structure is built and how it works? Every widget has its own “entry point”, but do I have to merge them all into one widgetset in order to use them all with one entry point? Probably the explanation is very easy and I’m thinking too complicated. :wink:

6

Hmm… seems that you have come across a old version of SuperImmediateTextField. The most current one should already have @ClientWidget instead of getTag().

Anyhow, yes, you need to have a gwt.xml which combines all the components widgetsets into one. it has one tag for the main widgetset in vaadin, and then a for every custom component that you use, so you get a list of all of them.


...
<inherits name="com.vaadin.terminal.gwt.DefaultWidgetSet" />
<inherits name="com.example.keylistenertextfield.widgetset.KeylistenertextfieldWidgetset" />
<inherits name="com.example.yellowbutton.widgetset.YellowButtonWidgetset" />
...

This is used by gwt so that it knows what to include into the java to javascript conversion upon compilation. I don’t have a instructions page with more info about this directly. Have to look around a little.

7

That’s great. I will use the “inherits” tag.

What about the entry-point?

When I had these 3 widgets, like you have listed them in your example, what will be the entry-point?
As in your example, it seems that I don’t need to define one entry-point. So, does the framework just see all the widgetsets and compile? Can I ignore the "entry-point?

8

You’re right, in most cases you don’t need an entry point when developing custom widgets in Vaadin. You also shouldn’t need to touch the gwt.xml -file, it should be modified by the widgetset build process automatically.

9

Hi!

Things changed in 6.2 so that you should not use your own entry-point in widgetsets. GWT will pick up the one from vaadin core. Widgets from inherited modules are collected to your applications “widgetset” by GWT generator automatically.

cheers,
matti

10

Autocomplete jar was removed from svn in rev 10970. Why it happened ? Will this component be developed and supported in future ?

I am a new in Vaadin and I am looking for something like GWT’s SuggestBox class. I am creating user-view with a search form. One of forms fields is editable combobox with a 40000 elements(city names). I want to show to a user all correct possibilities after he enter 3 first characters. for example: he will enter 3 chars: “Lon” and the component will show all possibilities (London and others).

I do not want to load at start all 40k elements, so it looks using Autocomplete will be good idea.

11

Would
ComboBox
 be unsuitable for your usecase? It searches lazily through your 40k elements without loading them to client-side.

12

Finally I used ComoBox and its ok :slight_smile:

13

I know this is an old thread, and I’m sorry to resurrect it, but this seems like the right place.

The combo box is a good answer for cases where there isn’t much overhead on the server side to returning an item in the container given an ID. But sometimes the overhead here can be too much. Or at least that’s my perception.

Auto completion with a defined interface to produce matching server-side results is a feature that I think Vaadin really needs in core. I will look into developing it, if there’s interest.

Best,
Laird

14

Hi Aladdin, can you post the code you made for your combination of supper immediate text field and auto complete text field pls. I am looking for a Vaadin component that functions like google search field.

15

Hi Sami
which work between the two?

org/vaadin/sami/autocomplete/

or

com/itmill/incubator/autocomplete/

Thanks
Mattia

16

Hi

I am new in vaadin and I try to add dependency with suggestiontextfield to my pom.xml file and I’ve got an error… I don’t understand why?

Please, help me!

17

Hi Lam le,

Did you come up with something? I’m also looking for something like google search field. Thanks.

18

so great , i’ll use it , thanks

19

Hi Guys, I also tried merging the superimmediatefield with the autocompletefield. I got the following to work, but still a few kinks to work out. Maybe other can work on it. Just implemented the keyup listener with a timer in the autocompletefield. I haven’t renamed the packages.
13202.xml (118 Bytes)
13203.zip (6.76 MB)

20

If you get it working well, you could also publish it as an add-on to the
Directory
 where others can find it and use it more easily.