07｜ 无代码开发 ｜ 如何使用Zion实现搜索功能

搜索功能不管在APP上还是小程序都是随处可见也是不可缺少的一个功能，搜索一般是指输入某个关键词，在多个字段中进行模糊匹配返回相关数据，今天教大家使用Zion实现搜索效果，只需要三步就能实现。先来看一下效果图：

实现效果：在搜索框输入需查询的姓名，与数据库中的数据匹配，如姓名存在，返回相关的数据；相反，如查询不到，则返回无数据相关内容。

根据上述预期实现的效果，我们先来整理一下所需要的组件类型。

组件和数据类型

需用到以下组件：

• 列表（重点）

• 使用方法：需向服务器的某个数据模型请求多条数据可使用列表组件。

• 文字

• 文字输入框

• 条件式容器

数据类型：

• 项数据（重点）

• 使用方法：项数据是列表获取过来的多条数据中的某一条数据，在容器视图内加入的所有组件都可以使用项数据（简单理解就是需请求多条数据的可使用项数据）

• 输入框数据（重点）

• 使用方法：一般用于【文字输入框】组件中，当需获取输入框值的时候可以使用输入框数据，使用场景如：注册页面（获取用户的用户名和密码）等，相对来讲输入框数据比较好理解。

• 远程数据

制作过程

一、页面布局

步骤1：拖入【文字输入框】和【条件式容器】，位置和宽高可参考图，如图所示：

步骤2：单击【条件式容器】，创建可选状态【无数据】和【有数据】，如图所示：

页面基本布局已完成，稍微有点简陋~

二、 创建数据模型

步骤1：创建【员工数据】数据表，分别创建【name】【gender】【position】三个字段:，如图所示：

步骤2：点击【后台】并【重新更新后台】，进入后台，添加相关数据，数据可以自编，如图所示：

三、数据绑定

步骤1：给当前页面添加【远程数据】，名称：staff（不能用中文），类型：员工数据，过滤类型：有过滤条件，过滤：name相似输入框/文字输入

步骤2：给【条件式容器】中的【无数据】和【有数据】添加内容和条件设置，如下：

• 无数据：配一张无数据的图片或直接用文字组件表示无数据，条件设置：为空，运算数类型：文本，运算数：远程数据/staff/ID

• 有数据：拖入【列表】组件，数据源：网络，列表：员工数据，过滤类型：有过滤条件，过滤：name相似输入框/文字输入

双击【列表】组件，拖入【文字】组件，依次添加【姓名】【性别】和【职位】，并绑定对应数据（这里要用到项数据，因为需向服务请求多条数据），如图所示：

条件设置：总是即可

总结

这篇文章通过搜索功能的实践为大家整理了三个知识点：

• 重点掌握【列表】组件的使用方法和运用场景，理解【项数据】和【输入框数据】。

• 在使用【列表】组件时绑定的数据类型是项数据，因为请求的数据不止一条。

• 过滤条件中【相似】，一般用于通过某个字段来匹配/查询数据。