Axure绘制自动填充输入框

大家日常的原型绘制中应该能经常用到带填充的自动填充输入框，如各大电商网站的搜索框，在输入部分内容后，下拉弹框中会自动根据用户输入的内容进行检索，那么这样的输入框应该如何使用axure进行绘制呢？下面我来详细的进行制作流程的讲解

 

一、功能分析

通过分析，目前需要实现的功能如下：

①当输入框输入信息时，下拉列表展示相关的搜索关键词

②当单击选择选项时，将选中的值回填至输入框，同时下拉框消失

二、原型绘制

首先我们梳理一下需要的元件，由于需要实现输入后筛选的效果，故想到到了使用中继器的筛选功能来实现，所以我们需要一个文本输入框和一个中继器。

1、绘制文本输入框

由于系统的默认的输入框边框比较丑，故我们在这里自己绘制一个效果比较好的输入框效果。首先我们先拖入一个矩形作为输入框的背景，宽度设置270，高度设置为35，边框的颜色设置为灰色。

再拖入一个文本框元件，同时设置宽度为268，宽度设置为33，拖动至合适的位置，同时添加提示文字为：如：输入“a”；并隐藏边框。到这里文本输入框的样式就已经设置完毕了。

2、绘制下拉弹框

拖入一个矩形作为下拉弹框的背景，设置合适的大小和边框背景。

拖入一个中继器，并命名其列的名称以及数据，此时填写的数据就等同是咱们后续需要搜索的基础库数据了，并添加为中继器适配数据的交互；设置完毕后选中背景和中继器，设置为分组，名称为下拉弹框，方便后续隐藏和显示的操作。

3、添加当选择中继器中的某项数据时，将选择的文本赋值到输入框中的交互效果

双击中继器，编辑其中的选项的交互事件，当鼠标单击时，将选择的文本设置给输入框，并隐藏下拉弹框。

4.添加输入框的交互事件

为输入框添加文本改变时的交互事件，当输入框有输入的信息时，移除之前的筛选信息，下拉展示当前的筛选信息；文本输入框选中与取消选中的效果，大家自行设计即可，在这里主要是给大家介绍自动搜索的功能，就不过多的赘述了。

5.默认隐藏下拉弹框

最后一步设置下拉弹框默认为隐藏效果即可，到此为止文本下拉自动搜索输入框的元件就制作完毕了，有需要的，大家可以按照该流程绘制一下。

三、效果展示