CODEWITHSUNDEEP
wicket
user2004166
user2004166

Reputation: 21

Wicket Autocomplete in wicket 6.2.0

I've been trying to use an example that appears in the following link: http://www.mysticcoders.com/blog/autocomplete-with-an-object/

the trouble is nothing happens... when start typing something in the text field nothing happens. i debugged and it seems that the builder & renderer are not fired.

can someone please tell me why nothing happens?

I'm using Wicket 6.2.0 version.

Upvotes: 2

Views: 4117

Answers (5)

soorapadman
soorapadman

Reputation: 4509

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>

Upvotes: 0

Mr Jedi
Mr Jedi

Reputation: 34715

As @Rudi Wijava said it could be jQuery version problem.

In my project I have same problem but I can't use bundle version of jQuery couse skin required higher than Wicket provides. But it's simple solution for that. In your Application settings you can set jQuery reference to your own like this:

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

You can do this in class that extends WebApplication class http://ci.apache.org/projects/wicket/apidocs/6.0.x/org/apache/wicket/protocol/http/WebApplication.html

Upvotes: 0

Rudi Wijaya
Rudi Wijaya

Reputation: 930

Wicket since version 6.0 bundles its own version of jQuery (jQuery v1.8.3 as of Wicket 6.5.0).

Make sure you don't load your own jQuery.

Previously I had loaded our own jQuery (using RequireJS) while using Wicket 1.5.9. And suddenly after upgrading to Wicket 6.5.0 (actually, Pax Wicket 2.1.0) AutoComplete (among other things) stopped working.

My solution was to use the bundled jQuery and avoid loading our own jQuery.

If you use RequireJS to load jQuery, as we do, you will want to "replace" the jQuery module with a dummy module as follows:

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

So other modules that use RequireJS to load jQuery will continue to work.

Upvotes: 4

DerMiggel
DerMiggel

Reputation: 493

You should investigate Igor Vaynberg's Wicket-Select2 project which offers very nice features for auto-completion, multi-selection etc. Especially as you mentioned something like adding recipients to new mails in Gmail, you should consider using something based on this example.

Upvotes: 1

Malte
Malte

Reputation: 188

Can you provide your code?

Did you use an AutoCompleteTextField? In this case you must add some css-classes in your stylesheet that define the autocomplete list.

For testing this class i would choose DefaultCssAutoCompleteTextField. This works out-of-the-box. You only have to implement the getChoices Method

Upvotes: 0

Related Questions