Axure教程:如何制作带搜索功能交互的下拉框

带搜索功能的下拉框是产品经理在原型设计中经常用到的一个功能,在本教程中我们将学习如何通过中继器快速设计一个下拉搜索框。

演示效果:

                                 v2-c765284d790ab2f712b27c1253966944_b.gif


将要实现的功能

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


如何实现这些功能

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


制作过程

第一步:Widgets设置

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

1.jpeg

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

2.jpg


第二步:设置交互

3.jpg

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

4.jpg

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

5.jpg

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