wicket - 检票口 6.2.0 中的检票口自动完成

Question

我一直在尝试使用以下链接中出现的示例： http ://www.mysticcoders.com/blog/autocomplete-with-an-object/

问题是什么都没有发生……当开始在文本字段中输入内容时，什么也没有发生。我进行了调试，似乎没有触发构建器和渲染器。

有人可以告诉我为什么什么都没发生吗？

我正在使用 Wicket 6.2.0 版本。

Answer 1

Wicket 自 6.0 版以来捆绑了它自己的 jQuery 版本（从 Wicket 6.5.0 开始的 jQuery v1.8.3）。

确保你没有加载你自己的 jQuery。

以前我在使用 Wicket 1.5.9 时加载了我们自己的 jQuery（使用 RequireJS）。突然升级到 Wicket 6.5.0（实际上是 Pax Wicket 2.1.0）自动完成（除其他外）停止工作。

我的解决方案是使用捆绑的 jQuery 并避免加载我们自己的 jQuery。

如果您像我们一样使用 RequireJS 加载 jQuery，您将希望用一个虚拟模块“替换” jQuery 模块，如下所示：

define([], function() {
    return jQuery;
});

所以其他使用 RequireJS 加载 jQuery 的模块将继续工作。

Answer 2

您应该研究 Igor Vaynberg 的Wicket-Select2项目，该项目为自动完成、多选等提供了非常好的功能。特别是当您提到在 Gmail 中添加收件人到新邮件时，您应该考虑使用基于此示例的东西。

Answer 3

你能提供你的代码吗？

您是否使用了AutoCompleteTextField？在这种情况下，您必须在样式表中添加一些定义自动完成列表的 CSS 类。

为了测试这个类，我会选择DefaultCssAutoCompleteTextField。这是开箱即用的。您只需要实现 getChoices 方法

Answer 4

正如@Rudi Wijava 所说，这可能是jQuery 版本问题。

在我的项目中，我遇到了同样的问题，但我不能使用比 Wicket 提供的更高要求的 jQuery couse 皮肤捆绑版本。但这是一个简单的解决方案。在您的应用程序设置中，您可以将 jQuery 引用设置为您自己的，如下所示：

  jQueryLibrarySettings.setJQueryReference(new UrlResourceReference(Url.parse(contextPath
        + "/static/js/libs/jquery-2.0.2.min.js")));

您可以在扩展 WebApplication 类 http://ci.apache.org/projects/wicket/apidocs/6.0.x/org/apache/wicket/protocol/http/WebApplication.html的类中执行此操作

Answer 5

You can use following link to do Autocomplete textbox which is easy to use :
http://www.7thweb.net/wicket-jquery-ui/autocomplete/DefaultAutoCompletePage;jsessionid=ACC1524F61A303942AEE7C28D096DF7D?0


For Example:

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);
            }
        });
    }
}


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>