Searchbox"
From Documentation
(Searchbox init) |
m (example) |
||
| Line 5: | Line 5: | ||
= Searchbox = | = Searchbox = | ||
| − | |||
*Java API: <javadoc>org.zkoss..zkmax.zul.Searchbox</javadoc> | *Java API: <javadoc>org.zkoss..zkmax.zul.Searchbox</javadoc> | ||
*JavaScript API: <javadoc directory="jsdoc">zkmax.inp.Searchbox</javadoc> | *JavaScript API: <javadoc directory="jsdoc">zkmax.inp.Searchbox</javadoc> | ||
| − | + | {{ZK EE}} | |
| − | + | [ since 9.0.0 ] | |
= Employment/Purpose = | = Employment/Purpose = | ||
| Line 16: | Line 15: | ||
= Example = | = Example = | ||
| − | |||
<source lang="xml" > | <source lang="xml" > | ||
| − | + | <zscript> | |
| + | ListModel model = new ListModelArray(new String[] { | ||
| + | "North America", "South America", "Europe", "Asia", "Africa", "Oceania", "Antarctica" | ||
| + | }); | ||
| + | </zscript> | ||
| + | <searchbox model="${model}" placeholder="An unknown place" autoclose="true"> | ||
| + | <template name="model"> | ||
| + | <html><![CDATA[ | ||
| + | <i class="z-icon-globe"></i> ${each} | ||
| + | ]]></html> | ||
| + | </template> | ||
| + | </searchbox> | ||
</source> | </source> | ||
=Mouseless Entry Searchbox= | =Mouseless Entry Searchbox= | ||
| − | * <tt>UP</tt> or <tt>DOWN</tt> to pop up the list. | + | * <tt>UP</tt> or <tt>DOWN</tt> to pop up the list if focused. |
* <tt>ESC</tt> to close the list. | * <tt>ESC</tt> to close the list. | ||
* <tt>UP</tt>, <tt>DOWN</tt>, <tt>HOME</tt>, <tt>END</tt>, <tt>PAGE UP</tt> and <tt>PAGE DOWN</tt> to change the selection of the items from the list. | * <tt>UP</tt>, <tt>DOWN</tt>, <tt>HOME</tt>, <tt>END</tt>, <tt>PAGE UP</tt> and <tt>PAGE DOWN</tt> to change the selection of the items from the list. | ||
| Line 41: | Line 50: | ||
==selectedItem== | ==selectedItem== | ||
==selectedItems== | ==selectedItems== | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
=Supported Events= | =Supported Events= | ||
| Line 74: | Line 73: | ||
Notifies one that the user is searching by keywords. | Notifies one that the user is searching by keywords. | ||
|} | |} | ||
| − | |||
| − | |||
| − | |||
=Supported Children= | =Supported Children= | ||
| − | none | + | * none |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
=Version History= | =Version History= | ||
Revision as of 10:54, 23 September 2019
This page is under construction, so we cannot guarantee the accuracy of the content!
Searchbox
- Available for ZK:
-
[ since 9.0.0 ]
Employment/Purpose
A searchbox.
Example
<zscript>
ListModel model = new ListModelArray(new String[] {
"North America", "South America", "Europe", "Asia", "Africa", "Oceania", "Antarctica"
});
</zscript>
<searchbox model="${model}" placeholder="An unknown place" autoclose="true">
<template name="model">
<html><![CDATA[
<i class="z-icon-globe"></i> ${each}
]]></html>
</template>
</searchbox>
Mouseless Entry Searchbox
- UP or DOWN to pop up the list if focused.
- ESC to close the list.
- UP, DOWN, HOME, END, PAGE UP and PAGE DOWN to change the selection of the items from the list.
- ENTER to confirm the change of selection.
Properties
autoclose
disabled
itemConverter
itemRenderer
model
multiple
open
placeholder
searchMessage
selectedItem
selectedItems
Supported Events
| Event: SelectEvent
Represents an event caused by user's the list selection is changed at the client. | |
| Event: OpenEvent
Denotes that the user has opened or closed a component. Note: unlike onClose, this event is only a notification. The client sends this event after opening or closing the component. | |
| Event: Event
Notifies one that the user is searching by keywords. |
Supported Children
* none
Version History
| Version | Date | Content |
|---|---|---|
| 9.0.0 | September 2019 | ZK-4380: Provide a Searchbox component |