Processing...
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.

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

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

import java.util.stream.Collectors;

public class LanguageVM {

    private String name;
    private ListModelArray<String> proglangs;

    @Init
    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"
        });
        proglangs.setMultiple(true);
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

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

    @Command
    public void show() {
        Clients.showNotification(String.format(
                "You are familiar with %s.",
                proglangs.getSelection().stream().collect(Collectors.joining(", "))
        ));
    }
}