该组件提供了文本输入和搜索能力，帮助用户从海量信息中获取准确内容。下文介绍组件的详细配置方法。

应用示例

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

示例

步骤一：添加组件

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

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

    搜索框

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

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

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

步骤三：配置样式

  1. 在右侧样式中，设置组件样式。
    样式 说明
    搜索框配置 设置以下配置项：
    • 搜索框形状

      选择默认时，可配置搜索按钮文字，支持最多配置10个字符。

    • 选择触发方式：搜索的触发方式。
    • 提示语：搜索框的默认提示。
    • 字符数量限制：输入内容的字符数，取值范围为0~100个。
    • 显示清空按钮：选中复选框后，当应用运行时，在搜索框输入内容后，搜索按钮左侧显示清空按钮清空。
    • 显示搜索图标：选中复选框后，在搜索框右侧显示搜索图标搜索。
    搜索框样式 设置组件静态和鼠标hover时颜色，按钮文字和输入文字的样式。

    选中显示搜索图标后，可显示并配置图标大小和图标颜色。

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

步骤四：配置交互动作

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

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

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