组件名称
搜索框
案例演示
主要功能
参考下拉框绑定数据表的实现方式,先做前端数据的模糊筛选,组件获取到操作焦点时展示全部数据列表内容,在用户输入内容过程中、下方列表内容逐渐减少、主要显示以下目标:
1)支持模糊筛选功能;(最大支持:5千条数据)
2)支持双向赋值
3)支持切换数据源
4)支持设置占位提示占位配置
5)搜索无结果显示
6)支持点击数据改变时触发器
7)支持给变量赋值搜索框的值
8)支持给变量赋值搜索框的值
9)支持允许输入非选项内容
搜索框组件界面预览
1、支持模糊检索
支持用户能够快速输入关键字并获得模糊检索结果。例如,对于查询词“car”,模糊检索可以匹配到“card”、“care”、“cars” ,“cat” 等相关词汇。当用户输入词组字符时,搜索框自动提示可能的搜索词或提供自动完成功能,自动去数据源检索数据并以下拉列表方式展示出来;
2、支持双向赋值
用户可手动键入、可将小程序的变量做为搜索条件、也可以将搜索列表传递给别的变量。给搜索框赋值后,列表就立即出现展开、并且按赋值内容进行了筛选。
通过设置参数值给组件搜索框赋值
3、支持切换数据源
目前支持数据表搜索,可绑定某一数据表的数据字段。
4、支持设置占位提示占位配置
支持输入占位提示:不超过32字符
效果:如输入input here
5、搜索无结果显示
● 实时检索,若空显示暂无数据
● 支持回车检索
6、支持点击数据改变时触发器
触发方式:点击下拉列表某一行数据后可触发,明确是完成选择动作后触发的;触发器名称:数据改变时
同时搜索框里的值也是变成该选择的值;
7、支持给变量赋值搜索框的值
通过设置参数值给变量赋值搜索框的值,这里需要注意,搜索会返回两个值
一个是下拉列表的值,另一个是返回值,默认返回下列列表选择的值,如果使用了返回值,这里搜索框的值应等于返回值;
8、支持取值和标题配置
勾选“支持取值和标题相同”,仅支持配置一个字段,当前下拉列表展示的值等于搜索框的值;
未勾选“支持取值和标题相同”,可配置两个字段,当前下拉列表展示的值和搜索框的实际值可以分开配置;
9、支持允许输入非选项内容
勾选“允许输入非选项内容”时,此时搜索框可以当作普通输入框使用,输入的值如果不是绑定的字段下的值不会被清空;
未勾选“允许输入非选项内容”时,此时输入的值如果不是绑定的字段里的值,搜索框将会被清空;
10、支持自动去重功能
我们在添加搜索框组件之后,需绑定数据表查询条件选择搜索框过滤,然后取值选择要进行检索的内容。
绑定的数据表有多个相同数值时,搜索框会自动筛选进行重复的部分,可以看到数据表有多个相同的日期,我们选择取值数据表字段之后,在预览检索的时候会自动屏蔽掉相同的数值。