Question

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

麻烦没有任何反应...... 当开始在文本字段中键入内容时没有任何反应。我调试了，似乎建设者＆amp;渲染器没有被解雇。

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

我正在使用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）AutoComplete（以及其他东西）停止工作。

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

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

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

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

Answer 2

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

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>

Wicket自动完成wicket 6.2.0

5 个答案: