我有wicket的AutoCompleteTextField。要更新模型，我使用＆＃39; onblur＆＃39;事件。
我需要在＆＃39; onblur＆＃39;之后刷新文本字段。事件发生，因为需要验证。
以下是用于说明问题的代码示例
WebPage子类：
public class TestPage extends WebPage {
private Integer testField;
public TestPage() {
final List<Integer> allowedValues = new ArrayList<Integer>();
for (int i = 0; i < 5; i++) {
allowedValues.add(50 + i * 5);
}
final PropertyModel<Integer> testModel = new PropertyModel<Integer>(this, "testField");
final AutoCompleteSettings autoCompleteSettings = new AutoCompleteSettings();
autoCompleteSettings.setShowListOnEmptyInput(true);
autoCompleteSettings.setShowListOnFocusGain(true);
final AutoCompleteTextField<Integer> testInput =
new AutoCompleteTextField<Integer>("testInput", testModel, autoCompleteSettings) {
@Override
protected Iterator<Integer> getChoices(final String input) {
return allowedValues.iterator();
}
};
testInput.setOutputMarkupId(true);
testInput.setMarkupId("testInput");
add(testInput);
testInput.add(new AjaxFormComponentUpdatingBehavior("onblur") {
@Override
protected void onUpdate(final AjaxRequestTarget target) {
target.add(testInput);
}
});
}
}
对应的HTML：
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" xml:lang="en"
lang="en">
<body>
<input type="text" wicket:id="testInput"/>
</body>
</html>
问题是无法通过鼠标点击选择值。
我已尝试使用OnChangeAjaxBehavior - 并通过鼠标点击选择工作，但我不想在每次更改后执行验证（例如，用户想要键入54，他键入5 = ＆gt;验证开始，因为OnChangeAjaxBehavior被触发了）
我尝试过使用AjaxFormComponentUpdatingBehavior("onblur")和OnChangeAjaxBehavior的组合，我遇到了同样的问题：无法通过鼠标点击选择值，因为＆＃39; onblur＆＃39 ;在＆＃39; onchange＆＃39;
请注意，如果您对该行target.add(testInput);发表评论，它将按预期工作。
它似乎与此Wicket issue
相似它说6.18.0版本的问题是固定的，但我使用Wicket 6.18.0仍然存在这个问题。
我们已经从Wicket 1.4升级到wicket 6.而在Wicket 1.4中，它运行良好。
请就如何解决此问题向我提出任何建议。非常感谢您的帮助。提前谢谢。
答案 0 :(得分：0)
我建议你使用wicket Jquery UI自动完成框：
HTML：
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
<title>Wicket - jQuery UI: auto-complete</title>
<style type="text/css">
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 20px;
}
</style>
</wicket:head>
</head>
<body>
<wicket:extend>
<div id="wrapper-panel-frame" class="ui-corner-all">
<form wicket:id="form">
<div>Choose your favorite rock genre: (that starts with your criteria)</div>
<br/>
<input wicket:id="autocomplete" type="text" size="30" title="enter your criteria here"></input><br/>
<br/>
<div wicket:id="feedback" style="width: 360px;"></div>
</form>
</div>
</wicket:extend>
</body>
</html>
爪哇
package com.googlecode.wicket.jquery.ui.samples.pages.autocomplete;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.model.Model;
import com.googlecode.wicket.jquery.ui.form.autocomplete.AutoCompleteTextField;
import com.googlecode.wicket.jquery.ui.panel.JQueryFeedbackPanel;
public class DefaultAutoCompletePage extends AbstractAutoCompletePage
{
private static final long serialVersionUID = 1L;
private static final List<String> CHOICES = Arrays.asList("Acid rock", "Alternative metal", "Alternative rock", "Anarcho punk", "Art punk", "Art rock", "Beat music", "Black metal", "Blues-rock", "Britpop", "Canterbury scene",
"Chinese rock", "Christian metal", "Crossover Thrash Metal", "Crust punk", "Crustgrind", "Dark cabaret", "Death metal", "Deathcore", "Deathrock", "Desert rock", "Djent", "Doom metal", "Dream pop", "Drone metal",
"Dunedin Sound", "Electronic rock", "Emo", "Experimental rock", "Folk metal", "Folk rock", "Freakbeat", "Funk metal", "Garage punk", "Garage rock", "Glam metal", "Glam rock", "Goregrind", "Gothic metal", "Gothic rock",
"Grindcore", "Groove metal", "Grunge", "Hard rock", "Hardcore punk", "Heavy metal", "Indie pop", "Indie rock", "Industrial metal", "Industrial rock", "J-Rock", "Jazz-Rock", "Krautrock", "Math rock", "Mathcore",
"Melodic Death Metal", "Melodic metalcore", "Metalcore", "Neo-psychedelia", "New Prog", "New Wave", "No Wave", "Noise pop", "Noise rock", "Noisegrind", "Nu metal", "Paisley Underground", "Pop punk", "Pop rock", "Pornogrind",
"Post-Britpop", "Post-grunge", "Post-hardcore", "Post-metal", "Post-punk", "Post-punk revival", "Post-rock", "Power metal", "Power pop", "Progressive metal", "Progressive rock", "Psychedelic rock", "Psychobilly", "Punk rock",
"Raga rock", "Rap metal", "Rap rock", "Rapcore", "Riot grrrl", "Rock and roll", "Rock en Español", "Rock in Opposition", "Sadcore", "Screamo", "Shoegazer", "Slowcore", "Sludge metal", "Soft rock", "Southern rock", "Space Rock",
"Speed metal", "Stoner rock", "Sufi rock", "Surf rock", "Symphonic metal", "Technical Death Metal", "Thrash metal", "Thrashcore", "Twee Pop", "Unblack metal", "World Fusion");
public DefaultAutoCompletePage()
{
// Form //
final Form<Void> form = new Form<Void>("form");
this.add(form);
// FeedbackPanel //
final FeedbackPanel feedback = new JQueryFeedbackPanel("feedback");
form.add(feedback.setOutputMarkupId(true));
// Auto-complete //
form.add(new AutoCompleteTextField<String>("autocomplete", new Model<String>()) {
private static final long serialVersionUID = 1L;
@Override
protected List<String> getChoices(String input)
{
List<String> choices = new ArrayList<String>();
String inputLowerCase = input.toLowerCase();
int count = 0;
for (String choice : CHOICES)
{
if (choice.toLowerCase().startsWith(inputLowerCase))
{
choices.add(choice);
// limits the number of results
if (++count == 20)
{
break;
}
}
}
return choices;
//
// Equivalent to:
// return ListUtils.startsWith(input, CHOICES);
//
}
@Override
protected void onSelected(AjaxRequestTarget target)
{
info("Your favorite rock genre is: " + this.getModelObject());
target.add(feedback);
}
});
}
}
您可以根据需要更改此组件
如果不适合，请查看以下链接：