Buy me a coffee :)

Wicket - jQuery UI

jQuery UI integration in Wicket 6.x, Wicket 7.x , Wicket 8.x & Wicket 9.x

Auto-complete

Choose your favorite rock genre: (that starts with your criteria)





Components / Samples

Description

Since

wicket-kendo-ui-6.17.0

Licensing

Kendo UI "Core" is Apache License 2.0 licensed, starting from version 2014.1.416.
Prior to version 2014.1.416, Kendo UI "Web" was licensed under GPLv3.

A pro version - with a commercial license - is also available, it provides additional widgets (see http://docs.telerik.com/kendo-ui/intro/supporting/list-of-widgets)
To be able to use it, you need to change the ResourceReference with kendo.all.min.js

See also

[howto]-change-resource-references

Sources

  • Java
  • HTML
  • CSS
package com.googlecode.wicket.jquery.ui.samples.kendoui.autocomplete;

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.model.Model;
import org.apache.wicket.util.string.Strings;

import com.googlecode.wicket.jquery.core.utils.ListUtils;
import com.googlecode.wicket.kendo.ui.form.autocomplete.AutoCompleteTextField;
import com.googlecode.wicket.kendo.ui.form.button.AjaxButton;
import com.googlecode.wicket.kendo.ui.form.button.Button;
import com.googlecode.wicket.kendo.ui.panel.KendoFeedbackPanel;

public class KendoAutoCompletePage 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 KendoAutoCompletePage()
	{
		// Form //
		final Form<Void> form = new Form<>("form");
		this.add(form);

		// FeedbackPanel //
		final KendoFeedbackPanel feedback = new KendoFeedbackPanel("feedback");
		form.add(feedback);

		// Auto-complete //
		final AutoCompleteTextField<String> autocomplete = new AutoCompleteTextField<String>("autocomplete", Model.of("Heavy metal")) {

			private static final long serialVersionUID = 1L;

			@Override
			protected List<String> getChoices(String input)
			{
				return ListUtils.startsWith(input, CHOICES);
			}

			@Override
			public boolean isChangeEventEnabled()
			{
				return true;
			}

			@Override
			public void onChange(AjaxRequestTarget target, String value)
			{
				super.onChange(target, value);

				// resets the model to null when the user clears the selection
				if (Strings.isEmpty(value))
				{
					this.onSelected(target, null);
				}
			}

			@Override
			protected void onSelected(AjaxRequestTarget target)
			{
				super.onSelected(target);

				KendoAutoCompletePage.this.info(this);
				target.add(feedback);
			}
		};

		form.add(autocomplete);

		// Buttons //
		form.add(new Button("submit") {

			private static final long serialVersionUID = 1L;

			@Override
			public void onSubmit()
			{
				KendoAutoCompletePage.this.info(autocomplete);
			}
		});

		form.add(new AjaxButton("button") {

			private static final long serialVersionUID = 1L;

			@Override
			protected void onSubmit(AjaxRequestTarget target)
			{
				KendoAutoCompletePage.this.info(autocomplete);
				target.add(feedback);
			}
		});
	}

	private void info(AutoCompleteTextField<?> autocomplete)
	{
		Object choice = autocomplete.getModelObject();

		this.info(choice != null ? choice.toString() : "no choice");
	}
}
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
	<title>Wicket Kendo UI: auto-complete</title>
</wicket:head>
</head>
<body>
<wicket:extend>
	<div id="demo-panel">
		<form wicket:id="form">
			<div>Choose your favorite rock genre: (that starts with your criteria)</div>
			<br/>
			<input wicket:id="autocomplete" type="text" size="50" title="enter your criteria here" class="width-320" /><br/>
			<br/>
			<button wicket:id="submit" type="submit">Submit</button>
			<button wicket:id="button">Ajax Button</button>
			<br/><br/>
			<div wicket:id="feedback" class="width-460"></div>
		</form>
	</div>
</wicket:extend>
</body>
</html>