本教程被收录到了 Axure搜索框使用课程 , 开始你的系统性学习吧!
《Axure9淘宝模糊搜索框操作实例》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强操作实例,中继器,交互产品,界面组成等多维度案例或实操来进行更多的学习;此教程是由zilin在2021-06-02发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
今天给大家介绍为如何用axure实现模糊搜索,我们来了解一下搜索框有什么作用,产品引进更多的流量,增加了用户黏性。出于节省空间和搜索需求的考量,搜索框内会有文字的提示,提示用户搜索的方式,axure模糊搜索输入框教程详情往下看:
一、实现逻辑
1、当输入框的值为空时,下面的数据项不显示;
2、当输入框的值不为空时,下面的数据项显示,且数据筛选出包含输入框中关键词的数据项;
根据上面的逻辑,需要用到函数[[(‘searchValue’)]],对函数进行筛选。
二、元件搭配
在元件库中拉入一个输入框作为搜索输入框和一个中继器作为数据展示,如下所示:
三、交互实现
选中输入框,添加文本改变时的交互事件。需要先对文本添加判断条件,再执行动作,即当输入框的文字长度大于等于1时,执行动作,条件设置如下:
2)插入变量或函数为[[(LVAR1)!=-1]]。
函数的意思为:在中继器中查询文本框中文字出现的位置,也就是说,凡是能返回数字的条目,表示都是包含文本框文字的。当查询不到文本框文字时,返回值为-1(负1),即不包含查询的关键字。
其中 代表中继器中的数据项。LVAR1代表局部变量为文本框元件文字。!=-1的意思是即排除不包含查询的关键字的数据。
这样出现的模糊查询的结果是,只要包含输入框关键词的任意一个字,模糊查询的选项都会被列出来。如下图所示:
四、最终效果如下
中继器在原型制作中对数据的筛选是一个不错的元件,大家可以多尝试使用,有任何问题欢迎在文章底部留言讨论。源文件可以在公众号中留言获取。
以上就是Axure9淘宝模糊搜索框操作实例全部内容介绍了,关于更多axure9教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 Axure制作APP折叠面板 axure手风琴制作教程操作实例
> 下一篇 axure添加交互事件操作实例
2022-06-29 09:46
2022-06-16 09:55
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论