Axure教程:如何实现淘宝模糊搜索框?
ann3311 2025-03-29 14:50 16 浏览 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协议
相关推荐
- 港风女明星惊喜入淘，618新增百位明星淘宝开播
-
潮新闻客户端记者祝瑶今年天猫618，直播江湖风云再起，新增百位明星入驻淘宝开播。其中有钟丽缇、洪欣、陈松伶、陈法蓉等港剧黄金时代的女神级人物，她们通过淘宝直播全托管模式，轻装上阵投身直播带货行业。...
- 明星开的淘宝的店 你知道几个?（明星开的淘宝的店 你知道几个吗）
-
layciga：张艺兴(暂停运营了)dangerouspeople：薛之谦断头台的生活方式：尚九熙张予曦stylenotes：张予曦小飞象Orfila：吴昕织羽集：徐娇TIANCBRAND：陈赫D...
- 欧阳娜娜入职淘宝:近1周淘宝直播间粉丝过百万的明星飙升24倍
-
3月22日，一张欧阳娜娜的淘宝工牌在网上引发轰动。看度记者了解到，欧阳娜娜确实以淘宝新势力造型合伙人的身份“入职”了淘宝，担任2020年淘宝新势力代言人。她与淘宝还将有一系列更深入的合作，其中也包括时...
- 李小璐淘宝店日销10万，为何明星从“带货”转“卖货”?
-
天下网商记者王诗琪沉寂已久的李小璐再度回到大众视野，竟摇身一变成网红，带着自己设计的服装品牌，开起了淘宝店。9月26日晚正式营业，到28日下午4点，李小璐的淘宝店铺卖出了1100多件衣服，按均价...
- 官宣!100位明星来淘宝直播:明星影响力找到最好舞台
-
追星有多苦，只有粉丝知道：要是演唱会门票难抢、社交媒体上“爱豆”又长期不“营业”，到底该去哪里跟明星互动？现在淘宝直播给了个好去处：100位明星来淘宝直播了！在淘宝就能跟明星在直播间里亲密互动，还可以...
- 刘涛淘宝直播首秀交易额破亿，明星带货赚钱之余也有“失业”风险
-
5月14日，刘涛淘宝直播带货首秀，4小时交易总额突破1.48亿元，观看人次超过2100万；5月16日，陈赫抖音直播带货首秀，4小时5000万人次观看，销售额8269.13万元；5月17日，汪涵淘宝直播...
- 欧阳娜娜入职淘宝，明星排队来淘宝直播
-
3月22日，一张欧阳娜娜的淘宝工牌在网上引发轰动。记者了解到，欧阳娜娜确实以淘宝新势力造型合伙人的身份“入职”了淘宝，担任2020年淘宝新势力代言人。她与淘宝还将有一系列更深入的合作，其中也包括时下火...
- 李小璐复出开淘宝店，日销10万元，还有哪些明星“下海”了?
-
天下网商记者王诗琪沉寂已久的李小璐再度回到大众视野，竟摇身一变成网红，带着自己设计的服装品牌，开起了淘宝店。9月26日晚正式营业，到28日下午4点，李小璐的淘宝店铺卖出了1100多件衣服，按均价...
- 淘宝直播明星带货榜出炉!林依轮成全网明星主播TOP1
-
明星直播带货热度不减，真刀真枪的PK下谁才是带货最厉害的那个？6月29日，淘宝直播联合淘榜单发布了今年天猫618的明星直播带货榜。排名第一的是曾凭借《爱情鸟》走红的林依轮，他更是首次跻身所有淘宝主播的...
- 300余明星上天猫618!半个娱乐圈都在淘宝直播
-
新京报讯吴亦凡、宋威龙、李易峰、许光汉、华晨宇、刘涛、毛不易、欧阳娜娜、赵丽颖、郑爽、华晨宇、鹿晗、古力娜扎、迪丽热巴、Angelababy、吴倩、张云龙……他们全要上天猫618。5月27日，天猫6...
- 朋友手上买路易威登nanospeedy是假货!鉴定师:教你两招鉴定技巧
-
今天鉴定了一只路易威登【nanospeedy】当这个包包出现在眼前的时候，我就在想这只包会不会是假货？【nanospeedy】被评为最难买的路易威登热门款式之一，今天就来讲讲超难买到的LV迷你枕头包！...
- 我那件花了1800元购买的“名牌”衣服送人了
-
不知多少女人像我一样，听信微商所谓的“尾单”，买进高仿的大牌服饰，还以为真的可以出入专柜无压力。对于一个拿死工资的上班族来说，买正品的大牌衣服和包包有点太奢侈。顶多护肤品用兰蔻，香水用迪奥，已经很享受...
- 1099元买手表 卖家:天梭“新款设计LOGO 亲”
-
11月1号，宁波的杨先生在网上买了一块手表，商品信息写的是瑞士天梭正品手表，可收到后他怀疑是假货。...
- 淘宝的戴森吹风机能买吗?假货踩坑记
-
先说一句啊，戴森的吹风机虽然宣传得比较好，但是我自己是绝对不会用的，之前只是琢磨放在浴室里面一个给洗澡的傻白甜们做个样子而已。自己还是老老实实的用松下nanoe毕竟自己的头发自己知道需求。11月27日...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 淘宝店铺优惠券怎么用 (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)