如何用axure做搜索功能交互的下拉框

Sponsor

要在Axure中设计一个搜索功能的下拉框，您可以按照以下步骤进行操作：

演示效果：

将要实现的功能

• 当输入框的文本发生变化时，下拉列表显示搜索的内容
• 当点击下拉列表中的项目时，输入框显示该项目文本
• 当输入下拉框值包含的字符时，自动筛选出对应的内容

如何实现这些功能

• 当输入框的文本发生变化时，在下拉列表中添加一个过滤器来过滤输入框中的文本。
• 当设置下拉列表的项目被点击时，输入框显示下拉列表的项目文本。

制作过程

第一步：Widgets设置

• 将一个单行输入框拖入画布，并命名为 “First Name”。
• 将一个中继器拖入画布，然后添加一个新的行数据。

创建一个动态面板，包括中继器，并且将动态面板命名为Search Panel。

第二步：设置交互

添加过滤器。选择文本字段，添加[when TEXT CHANGED]的交互，添加[Add Filter]的新动作，并设置中继器规则：[First_Name] [contains] [Text on widget] [First Name]。

添加GOT FOCUS动作。设置动态面板的选择状态。

• 双击中继器，选择矩形，并添加[Click OR TAP]，将矩形的文本分配给搜索文本字段，隐藏搜索面板，同时取消选择。
• 默认隐藏搜索面板，并且设置搜索框的选定样式。

作者：小斐实战

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。