SuggestBox

[bebo]

Hi all,
there is, or there will be, a component similar to GWT SuggestBox (a Text Box with autocompletion)?

Thanks.

[sjivan]

Have you had a look at the numerous ComboBox samples in the SmartGWT Showcase?

Sanjiv

[bebo]

Yes, I did. Actually you are right, what I meant it's a component that allows multiple value, for example comma separated.

So a text box, not a combo box, something similar to this: http://raibledesigns.com/rd/entry/creating_a_facebook_style_autocomplete

Demo here: http://demo.raibledesigns.com/gwt-autocomplete/

[smartgwt.dev]

Such a component doesn't exist in SmartGWT. If you really need it, you can sponsor the feature.

[sri]

Hi,

You will get the component like AutoCompletebox from ComboboxItem by making setShowPickerIcon(false)

[levi]

You will get the component like AutoCompletebox from ComboboxItem by making setShowPickerIcon(false)

hehe, interesting find!
except it shows up without a border at the right side from the input item, which is ugly, even with a custom icon.

Now if only that algorithm would support CamelCaseSearching :)

[len]

Hi, I have a similar problem. My aim is to have a component realy similar to SuggestBox of GWT not in the look but in the behavior.
The CoboBoxItem filter the suggest list starting from the first letter but I wish to filter the suggest list that could contain the filter letter in every part of the word. This is the behavior of the SuggestBox of GWT component.

[Isomorphic]

@Len setTextMatchStyle(substring)

[len]

It works. Many thanks

[JavaPenguin]

Write your own

The CanvasItem is easy to extend. So create you own and pass the gwt SuggestOracle to it. You do need to make the SuggestBoxPopup z-index very high. If not it falls behind the smart-gwt components.

Here is mine!

import com.smartgwt.client.widgets.form.fields.CanvasItem;
import com.smartgwt.client.widgets.Canvas;
import com.google.gwt.user.client.ui.SuggestBox;
import com.google.gwt.user.client.ui.SuggestOracle;

public class SuggestBoxItem extends CanvasItem {

public static final int HEIGHT = 20;
private Canvas canvas = new Canvas();
private SuggestBox suggestBoxField;

public SuggestBoxItem(String s, String s1, SuggestOracle suggestOracle) {
super(s, s1);

suggestBoxField = new SuggestBox(suggestOracle);

suggestBoxField.setStyleName("gwt-SuggestBox");
suggestBoxField.setHeight(getHeight() + "px");

canvas.setHeight(getHeight());
canvas.setStyleName("gwt-SuggestBoxCanvas");
canvas.addChild(suggestBoxField);

setCanvas(canvas);
}

public Canvas getCanvas() {
return canvas;
}

public int getHeight() {
return HEIGHT;
}
}

STYLE:

.gwt-SuggestBoxCanvas {
width: 200px;
height: 20px;
background: #ffffff;
border: none;
}

.gwt-SuggestBox {
font-family: Verdana, sans-serif;
font-size: 8pt;
font-weight: 400;
font-style: normal;
color: #333333;
line-height: 15px;
vertical-align: baseline;
background: #FFFFFF url(./images/text_input.gif) repeat-x scroll 0 0;
width: 200px;
height: 20px;
border: 1px solid #9CB0CE;
padding: 2px;
}

.gwt-SuggestBoxPopup {
margin-left: 3px;
z-index: 1000000;
}

[the_dudero1]

Autocomplete with remote data example

Here is an example :

http://javagoogleappspot.blogspot.com/2010/03/smartgwt-autosugget-autocomplete-with.html

[mehul8055@ymail.com]

Actually I also face the same problem


.gwt-SuggestBoxCanvas {
width: 200px;
height: 20px;
background: #ffffff;
border: none;
}

.gwt-SuggestBox {
font-family: Verdana, sans-serif;
font-size: 8pt;
font-weight: 400;
font-style: normal;
color: #333333;
line-height: 15px;
vertical-align: baseline;
background: #FFFFFF url(./images/text_input.gif) repeat-x scroll 0 0;
width: 200px;
height: 20px;
border: 1px solid #9CB0CE;
padding: 2px;
}

.gwt-SuggestBoxPopup {
margin-left: 3px;
z-index: 1000000;
}



This chunk of css code help me lot

Thank you sir.

[coorasse]

The CanvasItem is easy to extend. So create you own and pass the gwt SuggestOracle to it. You do need to make the SuggestBoxPopup z-index very high. If not it falls behind the smart-gwt components.

Here is mine!

import com.smartgwt.client.widgets.form.fields.CanvasItem;
import com.smartgwt.client.widgets.Canvas;
import com.google.gwt.user.client.ui.SuggestBox;
import com.google.gwt.user.client.ui.SuggestOracle;

public class SuggestBoxItem extends CanvasItem {

public static final int HEIGHT = 20;
private Canvas canvas = new Canvas();
private SuggestBox suggestBoxField;

public SuggestBoxItem(String s, String s1, SuggestOracle suggestOracle) {
super(s, s1);

suggestBoxField = new SuggestBox(suggestOracle);

suggestBoxField.setStyleName("gwt-SuggestBox");
suggestBoxField.setHeight(getHeight() + "px");

canvas.setHeight(getHeight());
canvas.setStyleName("gwt-SuggestBoxCanvas");
canvas.addChild(suggestBoxField);

setCanvas(canvas);
}

public Canvas getCanvas() {
return canvas;
}

public int getHeight() {
return HEIGHT;
}
}

}

I tried it. The element works perfectly but the tabIndex does not.
The DynamicForm automatically set the tabIndex for the elements: this does not work for that custom item.
I tried different solutions with no success.
Any idea how to solve the problem?
I can't believe that there is not a suggestBox in smartGWT.
ComboBox is different and I don't need it!

[coorasse]

Any solution for the tabIndex issue inside a canvasItem?

I tried also with an inner DynamicForm with a TextItem and the TabIndex does not work correctly too.

Any suggestion?

[chellegaard]

I've produced a suggestBox using smartGWT's ComboBoxItem loaded with data from RPC.
I'd rather stay away from GWT's SuggestBox and the css issues arising from this if possible.
So why not just use the existing smartGWT widget and just handle the laoding myself (or through DataSources)??

See the code here: http://forums.smartclient.com/showthread.php?t=13582