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

应用示例

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

示例

步骤一:添加组件

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

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

    搜索框

(可选)步骤二:配置数据源

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

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

步骤三:配置样式

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

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

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

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

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

步骤四:配置交互动作

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

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

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