Axure9原型设计:淘宝模糊搜索框实现教程

2021-03-0710:31:25原型设计1 2,243 views字数 757阅读模式

如何在原型Axure9中体现模糊搜索框效果。
Axure9原型设计:淘宝模糊搜索框实现教程
一、实现逻辑文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21058.html

1、当输入框的值为空时,下面的数据项不显示;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21058.html

2、当输入框的值不为空时,下面的数据项显示,且数据筛选出包含输入框中关键词的数据项;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21058.html

根据上面的逻辑,需要用到函数[[(‘searchValue’)]],对函数进行筛选。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21058.html

二、元件搭配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21058.html

在元件库中拉入一个输入框作为搜索输入框和一个中继器作为数据展示,如下所示:
Axure9原型设计:淘宝模糊搜索框实现教程
选中中继器,在样式中,为中继器添加默认的数据,在这一列填充自己想要的数据项。
Axure9原型设计:淘宝模糊搜索框实现教程
三、交互实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21058.html

选中输入框,添加文本改变时的交互事件。需要先对文本添加判断条件,再执行动作,即当输入框的文字长度大于等于1时,执行动作,条件设置如下:
Axure9原型设计:淘宝模糊搜索框实现教程
设置条件满足时,显示下面的数据中继器,如下图所示:
Axure9原型设计:淘宝模糊搜索框实现教程
对数据中继器中的数据项进行筛选,主要利用函数[[(‘searchValue’)]],设置如下图所示:
Axure9原型设计:淘宝模糊搜索框实现教程
1)首先点击上图【规则】输入框旁的【fx】,配置筛选函数,为其先添加一个局部变量,即搜索框中的文字。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21058.html

2)插入变量或函数为[[(LVAR1)!=-1]]。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21058.html

函数的意思为:在中继器中查询文本框中文字出现的位置,也就是说,凡是能返回数字的条目,表示都是包含文本框文字的。当查询不到文本框文字时,返回值为-1(负1),即不包含查询的关键字。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21058.html

其中 代表中继器中的数据项。LVAR1代表局部变量为文本框元件文字。!=-1的意思是即排除不包含查询的关键字的数据。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21058.html

这样出现的模糊查询的结果是,只要包含输入框关键词的任意一个字,模糊查询的选项都会被列出来。如下图所示:
Axure9原型设计:淘宝模糊搜索框实现教程
接下来只需要添加另一个情形结果2。其条件设置为否则如果真,动作为:隐藏数据中继器。如下图所示:
Axure9原型设计:淘宝模糊搜索框实现教程
四、最终效果如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21058.html

中继器在原型制作中对数据的筛选是一个不错的元件,大家可以多尝试使用,有任何问题欢迎在文章底部留言讨论。源文件可以在公众号中留言获取。
Axure9原型设计:淘宝模糊搜索框实现教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21058.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/21058.html
Comments  1  访客  1
    • 虚怀若谷 0

      选择不了模糊查询出来数据,进入文本框里

    Comment

    匿名网友 填写信息

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

    确定