Axure教程:如何实现淘宝模糊搜索框?
ann3311 2025-03-29 14:50 14 浏览 0 评论
提到淘宝的搜索,大家都能想到在这个搜索框输入关键词后出现的一系列联想词。那么这种效果如何通过Axure做出来呢?又有哪些要点呢?
我们每天都在使用淘宝的搜索功能来筛选定位自己想要的商品,只需要输入一个关键词,就能模糊搜索到包含此关键词的所有商品。今天将为大家讲解如何在原型中体现该效果。案例效果如下:
一、实现逻辑
- 当输入框的值为空时,下面的数据项不显示;
- 当输入框的值不为空时,下面的数据项显示,且数据筛选出包含输入框中关键词的数据项;
根据上面的逻辑,需要用到函数[[LVAR.indexOf(‘searchValue’)]],对函数进行筛选。
二、元件搭配
在元件库中拉入一个【输入框】作为搜索输入框和一个【中继器】作为数据展示,如下所示:
选中【中继器】,在样式中,为中继器添加默认的数据,在
三、交互实现
1. 选中【输入框】,添加【文本改变时】的交互事件。需要先对文本添加判断条件,再执行动作,即当输入框的文字长度大于等于1时,执行动作,条件设置如下:
2. 设置条件满足时,显示下面的数据【中继器】,如下图所示:
3. 对数据【中继器】中的数据项进行筛选,主要利用函数[[LVAR.indexOf(‘searchValue’)]],设置如下图所示:
1)首先点击上图【规则】输入框旁的【fx】,配置筛选函数,为其先添加一个局部变量,即搜索框中的文字。
2)插入变量或函数为[[Item.Column0.indexOf(LVAR1)!=-1]]。
函数的意思为:在中继器中查询文本框中文字出现的位置,也就是说,凡是能返回数字的条目,表示都是包含文本框文字的。当查询不到文本框文字时,返回值为-1(负1),即不包含查询的关键字。
其中 Item.Column0代表中继器中的数据项。LVAR1代表局部变量为文本框元件文字。!=-1的意思是即排除不包含查询的关键字的数据。
这样出现的模糊查询的结果是,只要包含输入框关键词的任意一个字,模糊查询的选项都会被列出来。
如下图所示:
4. 接下来只需要添加另一个情形结果2。其条件设置为【否则如果真】,动作为:隐藏【数据中继器】。如下图所示:
四、最终效果如下
中继器在原型制作中对数据的筛选是一个不错的元件,大家可以多尝试使用,有任何问题欢迎在文章底部留言讨论。源文件可以在公众号中留言获取。
本文由 @火星人~艾斯 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议
相关推荐
- 夸克发布全新“AI相机” 形成多模态产品入口和交互体验
-
来源:环球网【环球网科技综合报道】4月27日,夸克AI超级框发布全新AI相机,上新“拍照问夸克”功能。基于视觉理解与思考推理的强大模型能力,夸克AI超级框从视觉出发创新下一代搜索体验,进一步理解和回...
- 拍照问夸克!“AI相机”上线(ai相机和普通相机有什么区别)
-
来源:新华网新华网北京4月27日电(记者张漫子)又一国产多模态AI应用上线。夸克AI超级框27日发布“AI相机”,上新“拍照问夸克”功能。基于视觉理解与思考推理的模型能力,“拍照问夸克”支持用户在手...
- 夸克推出“拍照问夸克” ,提升超级框多模态能力
-
4月27日,夸克AI超级框上新了“拍照问夸克”功能。基于AI超级框的视觉理解和推理模型能力,“拍照问夸克”能在手机和电脑上进行图片搜索、问答、思考、编辑以及创作。夸克搜索负责人张帆表示:“我们希望通过...
- 淘宝链接上小红书有什么用(怎么在小红书上挂淘宝链接)
-
一、小红书与淘宝链接互通的影响小红书和淘宝的合作,允许在小红书平台上直接挂载淘宝链接,这一变化具有多方面的意义。对于消费者而言,购物体验得到了极大的优化。以往在小红书上看到心仪的商品,若想购买,往往需...
- 如何批量下载淘宝上的商品图片信息
-
在电商领域中,图片具有决定性作用。优质的商品图片能第一时间抓住消费者眼球,快速传递产品信息,有效提升点击率和购买转化率。它直观展示商品细节、功能及应用场景,弥补了线上购物无法实物感知的短板。高质量的图...
- 教你快速轻松获取淘宝,天猫等平台商品图片的方法
-
在这个网络时代电商是我们日常会接触到,像淘宝,天猫,拼多多等一些平台,那么当我们想要下载这些产品的图片做参考的时候,我们都知道主图,详情图非常的多,下载下来是很麻烦的事情,那么现在有了好的解决方法,感...
- 一键批量下载淘宝图片信息,节省时间
-
图片在电商中的重要性不言而喻,它就像一家店铺的门面,直接影响着消费者的第一印象。高质量的图片能吸引顾客,提升购买欲望,而低质量的图片则可能导致潜在客户的流失。因此,投资于优质的产品摄影和设计是提升电商...
- 2025淘宝京东618活动时间表发布:从5月13日开始到6月18日结束,附优惠红包指南!
-
根据2025年京东和淘宝618最新活动规则,红包领取方式已全面升级,以下是整合多平台信息的一站式领取攻略,覆盖口令、时间、技巧及隐藏福利,建议收藏备用!...
- 淘宝双十一抢购攻略,如何能快人一步 小编来帮您
-
淘宝双十一抢购攻略,如何能快人一步小编来帮您
- 2025年淘宝京东618活动关键时间点,618选购攻略哪天买最便宜最优惠,活动力度最大
-
各位小伙伴注意啦!2025年京东618年中购物狂欢节即将盛大开启,今年的活动不仅延续了"全网最低价"的硬核承诺,更通过超长周期、多重补贴和创新玩法,为消费者打造一场覆盖全场景...
- 淘宝闪购奶茶免单再加码:单日70万杯,还有秒杀频道红包
-
天猫618期间,淘宝闪购加码奶茶免单,宣布天天送奶茶,5月24日全天再送出70万杯。用户进入淘宝App搜索“奶茶免单”,或者进入淘宝闪购频道,点击左下角的“抽免单”就有机会抢到奶茶免单卡。此外,5月2...
- 网店标品应该怎么去运营?运营的方法有什么?
-
在平台中,商品也分为标品和非标品,所以对商家来说,我们要做好不同产品间的运营工作。网络店铺的标品应该怎么去运营?运营的方法有什么?今天我们就来给各位商家分享一些方法与技巧。 广大商家们如想要知道商品...
- 淘宝 2025 年新玩法揭秘——内容种草与互动权重
-
咱做淘宝的,都知道这平台的规则和算法那是一年一个样,到了2025年,又有不少新变化。今天咱就来唠唠现在淘宝的一些玩法,看看咋在这新规则下把店铺搞起来。...
- 淘宝直通车如何合理运用大词、精准词、长尾词?
-
随着淘宝不断的更新,不断的变化,平台对词的人群筛选越来越精准了,优质的词能给我们带来跟多的流量,直通车也不例外,直通车的词如何运用到每一个场景是很重要的,下面我来分享下,我平时用词的一些技巧。直通车用...
- 直通车投放的关键词怎么选?(直通车标准投放)
-
直通车关键词的选择是我们直通车推广的重中之重。选择什么样的关键词,就会直接影响我们店铺的访客和最终成交量、以及直通车的推广效果,而它也从另一个侧面反映了客户的需求。投放什么样的关键词最适合直通车投放关...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- 淘宝店铺优惠券怎么用 (36)
- 淘宝图片上传 (53)
- 购买天猫专卖店 (31)
- 淘宝搭配套餐怎么弄 (31)
- 淘宝试用什么意思 (39)
- 淘宝动态评分 (34)
- 淘宝保证金在哪里交 (32)
- 淘宝宝贝降权 (32)
- 淘宝恶意点击 (32)
- 淘宝查号 (31)
- 淘宝系统异常 (31)
- 天猫平台 (33)
- 淘宝信誉等级划分 (31)
- 天猫网店开店费用 (32)
- 淘宝假一赔三申请 (37)
- 淘宝会员打折 (35)
- 淘宝好评率 (32)
- 淘宝如何加入购物车 (33)
- 淘宝涨价 (35)
- 淘宝如何刷信誉 (32)
- 天猫直播入口 (34)
- 淘宝上架 (33)
- 淘宝帐号 (33)
- 淘宝不能发货 (33)
- 淘宝排名查询 (32)