Searchbox"

From Documentation
(Created page with "= Searchbox = *Demonstration: N/A *Style Guide: N/A *[http://www.zkoss.org/product/edition.dsp Available in ZK EE only] since 9.5.0 == Related components == None. == Required...")
 
Line 4: Line 4:
 
*[http://www.zkoss.org/product/edition.dsp Available in ZK EE only]
 
*[http://www.zkoss.org/product/edition.dsp Available in ZK EE only]
 
   since 9.5.0
 
   since 9.5.0
 
== Related components ==
 
None.
 
  
 
== Required Settings ==
 
== Required Settings ==
Line 14: Line 11:
 
! <center>Description</center>
 
! <center>Description</center>
 
|-
 
|-
| aria-label
+
| aria-label / aria-labelledby
| Describe the Searchbox.
+
| Name the Searchbox. For more information about naming, please refer to [[ZK_Component_Reference/Accessibility | Accessibility]]
 
|}
 
|}
  
Line 35: Line 32:
 
| Close the popup
 
| Close the popup
 
|}
 
|}
 
== Example ==
 
<source lang="xml">
 
<zk xmlns:ca="client/attribute">
 
  <searchbox ca:aria-label="Choose something">
 
    <template name="model">
 
      <html><![CDATA[
 
      <i class="z-icon-globe"></i>
 
      <span class="name">${each}</span>
 
      <span class="description">yoyoyo</span>
 
      ]]></html>
 
    </template>
 
  </searchbox>
 
</zk>
 
</source>
 

Revision as of 23:44, 28 July 2020

Searchbox

 since 9.5.0

Required Settings

Attributes
Description
aria-label / aria-labelledby Name the Searchbox. For more information about naming, please refer to Accessibility

Keyboard Support

Key
Description
ArrowDown Open the popup and navigate options.
ArrowUp Navigate options.
Enter Select the options
Escape Close the popup