本次分享的是利用中继器实现的搜索输入联想功能,可将搜索的关键词添加到联想列表中
![%title插图%num Axure教程:搜索输入联想功能(中继器)](https://pmtemple.oss-cn-hangzhou.aliyuncs.com/wp-content/uploads/2023/12/frc-3229f0a444c7e892434e6c68e19f7fb9.png)
一、制作原型
1、拖动一个【矩形】元件,加入【文本框】,其文本框命名为“text”
拖动一个【矩形】元件,制作成“搜索”按钮,命名为“Button”
拖动一个动态面板,命名为“区域”
![%title插图%num Axure教程:搜索输入联想功能(中继器)](https://pmtemple.oss-cn-hangzhou.aliyuncs.com/wp-content/uploads/2023/12/frc-6d316a85a47d797d31727370b21ed74d.png)
2、点击动态面板,进入状态模式,拖动一个【中继器】元件,点击中继器,加入一个【矩形】元件,命名为“Label”,对中继器赋值
![%title插图%num Axure教程:搜索输入联想功能(中继器)](https://pmtemple.oss-cn-hangzhou.aliyuncs.com/wp-content/uploads/2023/12/frc-1bebb1645da2a89558070a130b4328f6.png)
二、交互设置
1、对搜索框进行“文本改变时“事件进行设置
![%title插图%num Axure教程:搜索输入联想功能(中继器)](https://pmtemple.oss-cn-hangzhou.aliyuncs.com/wp-content/uploads/2023/12/frc-5ef949c6fd32352e2e89a12e00992e8f.png)
2、对搜索按钮进行”鼠标点击时“事件设置
![%title插图%num Axure教程:搜索输入联想功能(中继器)](https://pmtemple.oss-cn-hangzhou.aliyuncs.com/wp-content/uploads/2023/12/frc-f56cd57484de25d46361a6ef96292779.png)
3、对中继器进行”每项加载时“事件设置
![%title插图%num Axure教程:搜索输入联想功能(中继器)](https://pmtemple.oss-cn-hangzhou.aliyuncs.com/wp-content/uploads/2023/12/frc-caeaebcbb6ca7b5f412f1d5c920e0937.png)
4、对中继器中的矩形框进行”鼠标点击“事件设置
![%title插图%num Axure教程:搜索输入联想功能(中继器)](https://pmtemple.oss-cn-hangzhou.aliyuncs.com/wp-content/uploads/2023/12/frc-a74400b85246ac7113d2b781da2fbc59.png)
所有设置进行完毕
原创文章,作者:DevilStefan,如若转载,请注明出处:https://www.pmtemple.com/fengsaitao/16170/