搜索框

应用示例

天猫首页的商品搜索框，通过搜索内容展示对应商品的相关信息。

步骤一：添加组件

1. 创建Web应用。具体操作，请参见创建Web应用。

2. 在Web应用编辑器中，单击最左侧的组件图标。

3. 在画布左侧组件列表上方，输入搜索框，找到该组件，然后将组件拖拽到中间画布。

   有关组件添加的更多信息，请参见添加组件。

   从左侧组件面板的基础组件分类中，将搜索框组件拖入画布。在右侧样式面板中可配置组件位置与尺寸（X、Y、W、H）、组件可见性、不透明度及数据源。搜索框属性包括：搜索框形状（默认）、选择触发方式（以上全部）、搜索按钮文字（搜索）、提示语（请输入）、字符数量限制（30），以及显示清空按钮和显示搜索图标复选框。搜索框样式区域可设置组件颜色（#DEDEDE）、组件 hover 颜色（#0070CC）及按钮文字字号与字体颜色。

（可选）步骤二：配置数据源

如果需要在提示框中选择指定数据进行搜索，可参考以下步骤配置提示框的数据源。

1. 在Web应用编辑器右侧样式中，单击数据源后配置数据源。
2. 在数据源配置页面，选择数据源类型，完成配置。
   可选数据类型有接口、静态数据、应用推送。
3. 单击确定。

步骤三：配置样式

1. 在右侧样式中，设置组件样式。

   样式	说明
   搜索框配置	设置以下配置项： 搜索框形状 选择默认时，可配置搜索按钮文字，支持最多配置10个字符。 选择触发方式：搜索的触发方式。 提示语：搜索框的默认提示。 字符数量限制：输入内容的字符数，取值范围为0~100个。 显示清空按钮：选中复选框后，当应用运行时，在搜索框输入内容后，搜索按钮左侧显示清空按钮。 显示搜索图标：选中复选框后，在搜索框右侧显示搜索图标。
   搜索框样式	设置组件静态和鼠标hover时颜色，按钮文字和输入文字的样式。 选中显示搜索图标后，可显示并配置图标大小和图标颜色。

2. 调整组件在页面中的最终位置。有关组件通用样式配置的更多信息，请参见样式配置。

步骤四：配置交互动作

1. 选中组件的交互页签，配置事件和交互动作。具体操作请参见交互配置。
   该组件仅支持事件值改变。组件值为当前组件中输入的搜索内容。

   例如配置搜索框的交互为赋值给变量和刷新组件，将待刷新组件数据源的参数来源设置为变量，实现搜索内容的展示。

2. 单击页面右上方的预览，预览和调试组件展示的数据和样式。