Description & Source Code

The Searchbox allows users to search for and choose from a set of predefined items. Distinguishing itself from a classic ZK combobox where users can input any value, the Searchbox confines selections to a predefined list, ensuring a more controlled and precise user experience.

    <div viewModel="@id('vm')@init('demo.combobox.searchbox.LanguageVM')" height="100%">
            <label value="Technical Skills:" style="line-height: 24px"/>
            <searchbox model="@init(vm.proglangs)" placeholder="None" width="20vw">
                <template name="model">
                <i class="z-icon-language"></i> ${each}
            <button label="Submit" onClick="@command('show')" />
package demo.combobox.searchbox;

import org.zkoss.bind.annotation.*;
import org.zkoss.zk.ui.util.Clients;
import org.zkoss.zul.*;


public class LanguageVM {

    private String name;
    private ListModelArray<String> proglangs;

    public void init() {
        proglangs = new ListModelArray<>(new String[] {
                "Java", "C", "Python", "C++", "C#", "Visual Basic .NET",
                "JavaScript", "SQL", "PHP", "Objective-C", "Groovy",
                "Assembly language", "Delphi/Object Pascal", "Go", "Ruby",
                "Swift", "Visual Basic", "MATLAB", "R", "Perl", "SAS", "D",
                "PL/SQL", "Dart", "F#", "Transact-SQL", "ABSP", "Scratch",
                "TypeScript", "Scala", "COBOL", "Lisp", "Rust", "Fortran",
                "Ada", "Julia", "Kotlin", "ActionScript", "RPG", "Logo",
                "Lua", "Prolog", "Scheme", "PostScript", "LabVIEW",
                "VBScript", "Bash", "PL/I", "MS-DOS batch", "Haskell"

    public String getName() {
        return name;

    public void setName(String name) { = name;

    public ListModel<String> getProglangs() {
        return proglangs;

    public void show() {
                "You are familiar with %s.",
                proglangs.getSelection().stream().collect(Collectors.joining(", "))