ui:search-bar

Purpose

Provides support for the search bar construct.

The search bar consists of three parts laid out in the following order.

An optional logo, represented using the object element.
A text input control, represented using the xforms:input element.
A submit button, represented using the xforms:submit element.

Refer to Search Bar and ui:flexible-box for further information.

Styles

There are a number of constraints that apply to the search bar elements. Refer to the topic entitled Search Bar for more information.

Contains

Attribute groups

Core attributes

Example

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:si="http://www.volantis.com/xmlns/2006/01/xdime2/si"
  xmlns:xforms="http://www.w3.org/2002/xforms"
  xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui">
  <head>
    <title>Search Bar</title>
    <xforms:model id="search">
      <xforms:instance>
        <si:instance>
          <si:item name="query"/>
        </si:instance>
      </xforms:instance>
      <xforms:submission id="search-submit" action="search-result.xdime"/>
    </xforms:model>
  </head>
  <body>
    <ui:search-bar>
      <object
        src="http://localhost:8080/mcs/projects/examples/assets/images/logo.png"
        srctype="image/png">
        <param name="mcs-transcode" value="false"/>
      </object>
      <xforms:input model="search" ref="query">
        <xforms:label/>
      </xforms:input>
      <xforms:submit model="search" submission="search-submit">
        <xforms:label>Search</xforms:label>
      </xforms:submit>
    </ui:search-bar>
  </body>
</html>