一、实现逻辑
1、当输入框的值为空时,下面的数据项不显示;
2、当输入框的值不为空时,下面的数据项显示,且数据筛选出包含输入框中关键词的数据项;
根据上面的逻辑,需要用到函数[[LVAR.indexOf(‘searchValue’)]],对函数进行筛选。
二、元件搭配
在元件库中拉入一个输入框
作为搜索输入框和一个中继器
作为数据展示,如下所示:
选中中继器
,在样式中,为中继器添加默认的数据,在这一列填充自己想要的数据项。
三、交互实现
输入框
,添加文本改变时
的交互事件。需要先对文本添加判断条件,再执行动作,即当输入框的文字长度大于等于1时,执行动作,条件设置如下:中继器
,如下图所示:中继器
中的数据项进行筛选,主要利用函数[[LVAR.indexOf(‘searchValue’)]],设置如下图所示:1)首先点击上图【规则】输入框旁的【fx】,配置筛选函数,为其先添加一个局部变量,即搜索框中的文字。
2)插入变量或函数为[[Item.Column0.indexOf(LVAR1)!=-1]]。
函数的意思为:在中继器中查询文本框中文字出现的位置,也就是说,凡是能返回数字的条目,表示都是包含文本框文字的。当查询不到文本框文字时,返回值为-1(负1),即不包含查询的关键字。
其中 Item.Column0 代表中继器中的数据项。LVAR1代表局部变量为文本框元件文字。!=-1的意思是即排除不包含查询的关键字的数据。
这样出现的模糊查询的结果是,只要包含输入框关键词的任意一个字,模糊查询的选项都会被列出来。如下图所示:
否则如果真
,动作为:隐藏数据中继器
。如下图所示:四、最终效果如下
中继器在原型制作中对数据的筛选是一个不错的元件,大家可以多尝试使用,有任何问题欢迎在文章底部留言讨论。源文件可以在公众号中留言获取。
以上就是MacW小编为大家带来的“Axure9教程:如何实现淘宝模糊搜索框?”,本文关键词:“Axure教程,模糊搜索”,链接:“https://www.macw.com/news/1222.html”,转载请保留。
Mac教程Axure RP教程,如何查看和共享您的原型?
Axure RP 9 for Mac是Mac平台上的一款专为快速原型设计而生的应用,Axure RP 9 Mac破解版可以辅助产品经理快速设计完整的产品原型,并结合批注,说明以及流程图,框架图等元素,将产品完整地表述给各方面设计人员,如UI 、UE等等,并在讨论中不断完善。今天就给大家带来了Axure RP如何查看和共享您的原型的教程,一起来看看吧!
2812020-03-22
Mac常见问题Axure在浏览器中预览时文字大小错误失效的解决办法
在用Axure设计时,有时候需要用到较小的文字来表达注释、标签等内容。但是在用浏览器预览时,会遇到设置的字号无效的情况。
452021-02-21
Mac教程axure教程|axure之图片拖动放大缩小
大家好,我是macw小编,今天给大家带来一个axure拖动图片可以改变大小尺寸的教程。axure教程很简单的,几步就搞定了。
742021-02-22
Mac资讯Ableton Live 11有哪些新功能?Ableton Live 11新功能介绍
Ableton Live 11全新上线,那么新的Live 11有哪些新功能?本篇文章详细介绍了Ableton Live 11的新功能
342021-03-03
Mac教程怎么使用肖像智能美化软件WidsMob Portrait?WidsMob Portrait使用教程
WidsMob Portrait Mac版是Mac平台上的一款专业照片编辑软件。WidsMob Portrait Mac版具有平滑,去除皱纹和美白以及控制面部,眼睛,脸颊,噪音等功能。今天Macw带来了WidsMob Portrait使用教程,教你轻松美化你的照片!
182021-03-25
Mac教程axure教程:如何实现数字输入框效果?
虽然AXURE有自带的数字输入控件,但是axure自带的交互和样式可能与我们产品的整体效果不一样,往往需要自己制作,那如何制作逼真的数字输入框控件呢,我们一起看看吧~
402021-03-26
Mac教程原型设计工具Axure提升效率的8个技巧
Axure专为快速原型设计而生的应用,Axure破解版可以辅助产品经理快速设计完整的产品原型,并结合批注,说明以及流程图,框架图等元素。如何使用Axure设计工具提升效率,包括以下几方面
662021-09-09
Mac教程Axure基础教程:快速创建动态面板制作左侧下拉菜单导航栏
本文主要讲解动态面板的基本用法,以便大家更容易去理解和深入学习,入门教程会分为几个小节,本节主要讲解如何通过动态面板快速制作下拉菜单效果。
1042021-09-13
Mac教程Axure基础教程:绘制饼状图
在产品设计过程中,会做一些图表分析的功能,这时候会经常使用饼状图,今天我来教大家如何利用Axure RP绘制饼状图。
442021-11-03