.

【beta】搜索框组件使用说明

伯益发表于:2023年06月05日 10:58:57更新于:2024年09月05日 15:30:27

组件名称


搜索框


案例演示


搜索框功能演示DEMO


主要功能

参考下拉框绑定数据表的实现方式,先做前端数据的模糊筛选,组件获取到操作焦点时展示全部数据列表内容,在用户输入内容过程中、下方列表内容逐渐减少、主要显示以下目标:


1)支持模糊筛选功能;(最大支持:5千条数据)

2)支持双向赋值

3)支持切换数据源

4)支持设置占位提示占位配置

5)搜索无结果显示

6)支持点击数据改变时触发器

7)支持给变量赋值搜索框的值

8)支持给变量赋值搜索框的值

9)支持允许输入非选项内容



搜索框组件界面预览

png

1、支持模糊检索

支持用户能够快速输入关键字并获得模糊检索结果。例如,对于查询词“car”,模糊检索可以匹配到“card”、“care”、“cars” ,“cat” 等相关词汇。当用户输入词组字符时,搜索框自动提示可能的搜索词或提供自动完成功能,自动去数据源检索数据并以下拉列表方式展示出来;

png


2、支持双向赋值

用户可手动键入、可将小程序的变量做为搜索条件、也可以将搜索列表传递给别的变量。给搜索框赋值后,列表就立即出现展开、并且按赋值内容进行了筛选。

通过设置参数值给组件搜索框赋值

png

3、支持切换数据源

目前支持数据表搜索,可绑定某一数据表的数据字段。

png

4、支持设置占位提示占位配置

支持输入占位提示:不超过32字符

png

效果:如输入input here

png


5、搜索无结果显示

● 实时检索,若空显示暂无数据

● 支持回车检索

png


6、支持点击数据改变时触发器

触发方式:点击下拉列表某一行数据后可触发,明确是完成选择动作后触发的;触发器名称:数据改变时

同时搜索框里的值也是变成该选择的值;

png


7、支持给变量赋值搜索框的值

通过设置参数值给变量赋值搜索框的值,这里需要注意,搜索会返回两个值

一个是下拉列表的值,另一个是返回值,默认返回下列列表选择的值,如果使用了返回值,这里搜索框的值应等于返回值;

png

8、支持取值和标题配置

勾选“支持取值和标题相同”,仅支持配置一个字段,当前下拉列表展示的值等于搜索框的值;

png

未勾选“支持取值和标题相同”,可配置两个字段,当前下拉列表展示的值和搜索框的实际值可以分开配置;

png

9、支持允许输入非选项内容

勾选“允许输入非选项内容”时,此时搜索框可以当作普通输入框使用,输入的值如果不是绑定的字段下的值不会被清空;

png

未勾选“允许输入非选项内容”时,此时输入的值如果不是绑定的字段里的值,搜索框将会被清空;

png


10、支持自动去重功能

我们在添加搜索框组件之后,需绑定数据表查询条件选择搜索框过滤,然后取值选择要进行检索的内容。

image (14).png


绑定的数据表有多个相同数值时,搜索框会自动筛选进行重复的部分,可以看到数据表有多个相同的日期,我们选择取值数据表字段之后,在预览检索的时候会自动屏蔽掉相同的数值。

image (15).png

image (16).png