“根据输入的内容自动显示匹配内容列表。”
这是《Axure9百例》系列第36篇
在文本框搜索时，自动匹配搜索的内容，并以列表的形式显示在文本输入框的下方，选中一项后当前选中内容回填到文本输入框中。
01
—
界面布局
界面由一个文本输入框(名称search_text)和一个中继器元件(名称file_list)组成，中继器用来显示匹配结果数据，界面比较简单，主要是演示一下文本输入框的输入处理和中继器的筛选功能。界面如下：
1、文本框的提示文本内容设置为“搜索文档、正文内容、团队或用户名”，且在获得焦点时会自动清除提示内容。
2、中继器预设了5条数据，表示的是文件列表。
中继器的每一项同一个图标和一个矩形框组成，矩形框架添加了默认的阴影效果，这样让整体看起来会有个阴影。矩形框文本设置为左对齐，并且左边距设置为60，空出的位置用来放一个图标。
中继器的矩形框添加了交互模式，鼠标经过时和选中时的样式，只改变了下背景颜色，选中时的样式和它一样。
3、初始状态，将中继器file_list隐藏。
02
—
交互处理
通过处理文本输入框的文本改变时事件，触发中继器的筛选功能，满足条件的数据才会显示，这里主要处理的是文本框的“文本改变时事件”。
事件有两个情形，分别用来显示和隐藏中继器的。我们希望文本框内没有输入文字时就隐藏中继器列表，否则才会显示。
情形1：如果当前输入框的文字长度大于0，也就是说输入了内容，则
1、显示中继器列表
2、添加一个筛选器，条件是当前中继器的name字段内容中包括输入的文本，即表达式：[[Item.name.indexOf(LVAR1)>-1]]，其中局部变量LVAR1是文本输入框的内容。字符串函数indexOf用来检查当前文本中是否包括指定内容，如果包含了，结果就大于-1
情形2：否则的话，就隐藏中继器列表，并删除中继器的筛选条件
1、隐藏中继器file_list
2、移除筛选条件
下面处理列表选中内容回填到文本输入框。
给中继器中的矩形框添加单击事件，单击后将当前矩形框的文本内容设置到输入框中，并且隐藏中继器列表。
F5预览一下效果，输入关键字，例如“需求”、“宽带”、“docx”等等，然后选中列表中的某一项单击选中。
03
—
小结
输入框的自动匹配主要应用了文本输入框的文本改变时事件，通过设置中继器的筛选条件，匹配满足条件的数据。从匹配的结果列表里单击后，通过设置文本将当前选中项回填到输入框中，完成整个搜索匹配过程。
你，get到了吗？
往期回顾
【Axure9百例】35.透明元件和创意动画
【Axure9百例】34.动画效果应用 - 片头动画
【Axure9百例】33.网易云音乐 - 单选效果
【Axure9百例】32.网易云音乐 - 两级导航菜单滑动
【Axure9百例】31.网易云音乐 - 唱片机播放
产品原型设计是产品经理的基本技能，本系列是 Axure9 原型设计的基础知识普及，目标是通过一百个案例，从不同的使用场景来学习 Axure9 的应用。希望你能通过点赞、在看或转发，让行业内更多的人一起学习，共同提升我们的原型设计能力，提高我们的产品设计能力。
