Axure百度模糊查询功能

本文实现的效果是类似于百度等众多网站的模糊查询功能,如图所示

1.建立Axure,本文以百度为例,便于了解。

2.插入一个单行文本框,长度根据自己的需求设定,文本框后面插入按钮。

 

3.在文本框下面建立一个动态面板,命名为“搜索列表”,点击动态面板的state1,编辑state1,拖动矩形到state1里面,并在矩形中添加内容,然后设置矩形的边框为none。本文以“天”字为例。

4.开始设置动作交互,单击文本框,当在文本框输入“天”时显示动态面板。当在文本框中输入非“天”时隐藏动态面板。



5.编辑动态面板的state1状态,选中“天气预报”对其添加单击事件,例如单击“天气预报”时搜索列表自动隐藏,且文本框显示“天气预报”。


7.编辑动态面板的state1状态,分别编辑其他选项

8.回到【百度】页面,按F5预览原型


 

猜你喜欢

转载自weigang-gao.iteye.com/blog/2280294