In Wicket there are 2 versions of an AutoCompleteTextField, one in wicket-extensions and the other in com.googlecode.wicket. I am trying to use one of them in a Wicket ModalWindow, but I am having problems with both.
Both versions are generally OK on a webpage without using modal windows but I need them inside of one. There is some limited examples out there but nothing specific to modal dialogs.
Wicket Extension version:
Using Wicket 6.11.0
final AutoCompleteTextField<T> field = new AutoCompleteTextField<T>( "component", getSelectionModel(), theclass, new AutoCompleteSettings() ) {
private static final long serialVersionUID = 1L;
@Override
protected Iterator<T> getChoices( String input ) {
return AutoCompleteSelect.this.getChoices( input ).iterator();
}
};
field.setOutputMarkupPlaceholderTag( true );
field.add( new AjaxFormComponentUpdatingBehavior( "change" ) {
private static final long serialVersionUID = 1L;
@Override
protected void onUpdate( AjaxRequestTarget target ) {
System.out.println( "Item selected! " + getSelectionModel().getObject() );
// This is never called!
}
} );
add( field );
Originally I was having problems getting this to work at all until I realized that it doesn't fetch the choices until you press the down key. If I put one in a ModalWindow, it's popup location gets screwed up and the suggestions appear off to the bottom right of the screen. Moving the dialog to the lower right of the screen accentuates the problem.
Questions:
- How do you get the popup to appear as someone types into the text field, rather than when they hit the down key?
- What is the best way to get an ajax onSelected-style call (like the one in the google version?) There is a version in the wicket examples [1] that relies on a form submission but this is no good if you need it before that.
Google Version:
Using com.googlecode.wicket-jquery-ui version 6.11.0
ITextRenderer<T> renderer = new ITextRenderer<T>() {
private static final long serialVersionUID = 1L;
@Override
public String getText( T object ) {
return object == null ? "" : object.toString();
}
@Override
public String getText( T object, String expression ) {
return object == null ? "" : expression + "." + object.toString();
}
};
final AutoCompleteTextField<T> field = new AutoCompleteTextField<T>( "component", getSelectionModel(), renderer, m_class ) {
private static final long serialVersionUID = 1L;
protected void onSelected( AjaxRequestTarget target ) {
System.out.println( "Item " + getSelectionModel().getObject() + " has been selected" );
}
@Override
protected List<T> getChoices( String input ) {
return AutoCompleteSelect.this.getChoices( input );
}
};
Though this initially works better (onSelected is useful and the popup appears in the correct place) putting it in a modal dialog makes the popup appear underneath the dialog. This can be fixed by changing the z-index through CSS (a bit messy but works), but there seems to be an event fired that hides the popup whenever you hover over it meaning nothing can be selected.
- Has anyone managed to stop the popup from disappearing?
- Is there a better way to deal with the z-index issue?
Wicket Extension Examples: http://www.wicket-library.com/wicket-examples/ajax/autocomplete?0 Google examples: http://www.7thweb.net/wicket-jquery-ui/autocomplete/ConverterAutoCompletePage?0
Thanks in advance.
Update to the latest Wicket 6.19.0 and see if the problems go away. Since 6.11.0 there were a few bugs regarding autocomplete fields and modal windows resolved:
Maybe they will solve your problems without the need of any hacking.