【Axure交互教程】 可模糊搜索的多选效果

最新推荐文章于 2023-11-23 17:15:32 发布
VIP文章 最新推荐文章于 2023-11-23 17:15:32 发布
阅读量838 收藏 5
点赞数 2
分类专栏： Axure交互教程 文章标签： 交互 ux 产品运营 axure
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43856438/article/details/119381657
版权

作品名称：可模糊搜索的多选效果

作品编号：Case009

软件版本：Axure9

作品类型：交互案例

原型预览链接（附源文件下载链接）：http://daisyaxure.com/demo/Case009

本文以豆瓣的添加话题页面为例讲讲如何在Axure9中实现带模糊搜索的多选选择器效果,教程有点长，请耐心观看。


交互效果说明 

1.点击话题列表中的话题选项，上方输入框内显示选择的话题标签，最多可选择5个标签，超出将有文字提示。

2.点击输入框内已选择的话题标签的删除按钮,可以删除已选择的话题标签，并且该标签返回至下方话题列表中。

3.在输入框中输入话题关键字可自动匹配对应的话题选项。

效果预览：

图片

元件准备 

1.拖入一个矩形元件，设置宽度：560px，高度：44px，圆角半径为2，命名为「input_bg」；

最低0.47元/天 解锁文章
Daisy Axure
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个毛玻璃（高斯模糊）效果
04-05
作者SmartDengg，源码RxBlur，在Android设备上,实现一个毛玻璃（高斯模糊）效果总是让人很棘手，不仅要考虑视觉效果，还要在性能和代码实现的复杂度上做出权衡。 这里归纳和总结了几种实现方案(PS: GitHub + StackOverflow + DIY)，并且用RxJava进行封装，方便以流的形式处理图片的加载和操作。
axure模糊搜索.rp
11-30
axure设计模糊搜索控件
axure原型——移动端选择器合集（单选、多选、分级、搜索效果）含地区、时间选择器
mushe93的博客
07-10 3271
原型预览地址：https://www.pmdaniu.com/storages/120756/8fc56edf349be4dbba1bf71379dff7c5-69620/start.html#id=iehtoj&p=%E5%8F%AF%E6%90%9C%E7%B4%A2%E7%9A%84%E5%8D%95%E9%80%89%E9%80%89%E6%8B%A9%E5%99%A8&g=1 01 单选选择器 单选选择器按效果又可以分为，点击选择器、滑动选择器、多级选择器、具有搜索效果的选.
Axure教程——模糊搜索（中继器 ）
weixin_43516258的博客
07-01 2106
本文介绍的是用Axure中的中继器制作模糊搜索
下拉框输入模糊查询_Axure RP 9 教程：模拟微信系列（3）——模糊查询
weixin_39964978的博客
12-10 525
本文是模拟微信的第三篇，本次模拟的主要内容是利用中继器和LVAR.indexOf(”)函数实现模糊查询。除了模糊查询，笔者还对之前两个版本的原型进行了进一步的优化，大家可以下载自行研究。效果图模糊查询可以根据用户的名称和用户的消息内容进行查询。制作原理LVAR.indexOf(‘A’)函数LVAR表示在哪儿搜索。A表示搜什么，如果A直接是文本，需要在两侧加上”，如果A是变量，则不需要”。本案例的L...
Axure 原型模板素材哪里下载
FourxiYuanzi的博客
05-25 2260
如果你想要下载 Axure 原型模板素材，可以前往即时设计资源广场进行一键复用。在即时设计资源广场，你可以免费使用所有的 Axure 原型模板素材，而且没有文件数量、团队或项目数量的限制。即时设计资源广场提供优质的 Axure 原型模板，为设计师节省了查找模板的时间，加快了设计进度，是原型设计师的效率工具！即时设计是一款具备一站式原型、设计和交付能力的在线原型设计协作工具，开创了原型设计协作的新模式。无需在不同工具之间切换，即可完成需求梳理、UI 设计、原型设计、收集反馈和原型交付等全过程。
Axure实现简单模糊搜索的功能的方式
Coolstuz的博客
10-04 8513
功能如图：实现模糊搜索，输入关键字进行搜索！ 可用于实际临摹中： 在之前临摹了一下PC端的“钉钉”应用。发现这个功能挺好用的 1.元件需求 一个文本框、一个中继器、一个动态面板加三个动态面板状态state1、state2、state3 可以给动态面板的里各个状态随意添加添加内容 2.交互 给中继器添加词库，并将中继器隐藏 1.点进中继器，对中继器里自带的矩形设置交互 （即单击中继器里的内...
Axure 9 实战案例，中继器的应用 3，按条件筛选中继器列表
默林工作室
03-25 5146
在上一篇教程，我们在普通中继器列表的基础上，加入了交替色和悬停色的效果 （了解更多），这个算是比较简单的，一学就会的交互了；那么本篇我们继续在交替色的基础上，增加筛选的交互，难度有一点增加了哦。 我们先来看看APP列表页的筛选效果图，大家可以看到列表页的交互主要包括： ①在搜索框输入关键词时，列表自动筛选出结果、显示删除图标； ②点击删除图标时，清空搜索条件、列表恢复如初、删除图标消失。 为了节省时间，这里我们提前把列表初稿准备好了（中...
关于layui的x-select多选下拉的交互
alxiao的博客
07-05 744
关于layui的x-select多选下拉的交互 部分前端代码： 部分前端代码： //改动开始---------------------------------------------- var streetdate = []; var communitydate = []; form.on('select(level)', function (data) { LevelValue(data.value); initTransfer(); })
关于checkbox结合搜索框引起的一个交互上的小问题
qc2347245的博客
03-15 117
后来我想起来了我可以通过a-checkbox自带的checked属性，解决这个问题 大体思路就是我创建一个大数组，也就是searchColumnsV，这个数组里面每一项包含3个属性，label,value和checked，label保存选项值，value保存选项id，checked保存选中状态，然后我通过v-for遍历这个大数组，生成每一个复选项，checked属性就绑定大数组的每一项的checked属性，就可以完美解决我遇到的这个问题了，代码如下。
Axure RP 8自定义复选下拉框，选中项文字同步显示
09-18
本资源为本人利用Axure RP 8制作的自定义复选下拉框，可以完成选中项文字在文本框中同步显示，可以供使用Axure者学习。
axure可多选树效果.zip
05-14
https://q6mga9.axshare.com 这是该模型的演示网页，直接在axure上上传的，可能是国外服务器，打开有点慢；
Axure设计实现下拉框多选及取消
04-05
Axure实现下拉框选项多选并将选中内容展示在文本框中，且可通过删除文本框的内容来取消对应的选项选中样式，具体的实现步骤可参考https://blog.csdn.net/super_DuoLa/article/details/123971433
Axure交互原型元件库汇总.zip
07-14
LIB001 - AxureUX交互原型Web元件库完整版； LIB001v2 - AxureUX WEB前后端交互原型通用元件库 v2.0； LIB003 - AxureUX交互原型移动端元件库完整版； OTH002 - AxureUX信息化精美简历模板完整版； TEM001 - AxureUX...
Axure-歌词向上滚动交互效果实例
最新发布
12-13
Axure-歌词向上滚动交互效果实例，可直接打开，编辑和修改成成自己想要的样式。 Axure-歌词向上滚动交互效果实例，可直接打开，编辑和修改成成自己想要的样式。 Axure-歌词向上滚动交互效果实例，可直接打开，编辑和...
Axure8交互原型 56套
05-04
格式：RP格式（Axure软件） 产品经理全套文档模板 Axure8可以打开8、7版本制作 Axure9可以全部打开9、8、7版本制作 \APP-Keep健身【axure8 \APP-O2O订餐【axure8 \APP-O2O美食【axure8 ...\WEB-导航切换交互【axure8
Axure实现模糊搜索框，只能输入数字，不能输入文字/字母
weixin_47706190的博客
11-23 86
错误原因：
Axure教程——多项选择器
weixin_43516258的博客
06-23 4418
本文介绍利用Axure里的中继器和动态面板制作一个多选下拉列表
Axure9教程：如何实现淘宝模糊搜索框？
lily_better的博客
10-22 1727
提到淘宝的搜索，大家都能想到在这个搜索框输入关键词后出现的一系列联想词。那么这种效果如何通过Axure做出来呢？又有哪些要点呢？ 我们每天都在使用淘宝的搜索功能来筛选定位自己想要的商品，只需要输入一个关键词，就能模糊搜索到包含此关键词的所有商品。今天将为大家讲解如何在原型中体现该效果。案例效果如下： 一、实现逻辑 1、当输入框的值为空时，下面的数据项不显示； 2、当输入框的值不为空时，下面的数据项显示，且数据筛选出包含输入框中关键词的数据项； 根据上面的逻辑，需要用到函数[[LVAR.inde
axure 常见交互教程
07-28
Axure RP是一款知名的原型设计软件，可以帮助用户简化表单布局，快速创建流程图、示意图、HTML模版、网站架构图等原型。在使用Axure RP时，可以通过添加元件到画布来构建原型界面。在左侧的元件库中选择要使用的元件，按住鼠标左键不放，拖动到画布适合的位置上松开即可添加元件。\[1\] 在Axure RP中，可以通过添加交互来实现各种功能。例如，可以给左侧滑块"LeftSlider"添加"移动时"的交互，将目标设置为橙色滑动条"ProgressBar"的宽度，数值为\[\[rightslider.left-leftslider.left\]\]。这里需要使用局部变量来获取对象，锚点为右侧。\[2\] 此外，对于滑块"LeftSlider"，它的滑动范围有一定的限制。向左滑动不能超过其初始位置，向右滑动不能超过右侧滑块"RightSlider"的左坐标。滑动范围即为灰色背景条"BackGround"的左坐标和滑块"RightSlider"左坐标之间的距离。\[3\] 以上是关于Axure RP常见交互的一些教程。希望对你有帮助！ #### 引用[.reference_title] - *1* [axure基础教程](https://blog.csdn.net/Ma2101812513/article/details/126551461)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [【Axure交互教程】拖动滑块确定评分区间效果](https://blog.csdn.net/weixin_43856438/article/details/119381420)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值