搜索框

应用示例

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

步骤一：添加组件

1. 创建Web应用。具体操作，请参见创建Web应用。
2. 在Web应用编辑器中，单击最左侧的组件图标。
3. 在画布左侧组件列表上方，输入搜索框，找到该组件，然后将组件拖拽到中间画布。

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

   

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

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

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

步骤三：配置样式

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

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

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

步骤四：配置交互动作

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

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

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