Axure技能——标签选择器组件制作
本文所涉及的Axure demo 可联系作者（yeq@wangsu.com）获得。
标签选择器（Tags select）
- 用户通过选择下拉列表内容，以标签形式展示与文本输入框中，可多选。
- 文本输入框可以对内容进行自动匹配快速查找。
- 多用于项名称较短且需要独立的展示方式的内容，如：姓名、属性等。
使用Axure制作标签选择器
Step1 基础样式搭建
border作用仅用于样式美化（可不做考虑）
根据需要，先拖出两个矩形设置样式，作为表单边框（border1、border2）
在border1上层加入隐藏边框的文本输入框（命名：txtinput）
在border2上层加入动态面板（命名：下拉，设为自动显示垂直滚动条）
注意上面两步操作都不要遮挡矩形的边框，大小可以参考图中数据进行设置
文本框获取焦点时，触发下拉事件
Step2 下拉动态面板内容填充
进入下拉动态面板编辑页面，增加中继器（命名：选项列表）
进入中继器修改内容以及样式，如下图所示（注意增加悬停样式&checkbox）
选项背景矩形（命名：选项 ），设置背景矩形与checkbox为组合
设置【选项组合】交互动作
当鼠标点击【选项组合】时切换【选项组合】的选中状态
且设置焦点在【txtinput】
勾选“允许触发鼠标交互”
Step3 设置中继器【选项列表】内容及事件
补充中继器数据如下所示
设置中继器每项载入时的交互动作
填充文字至【选项】中
Step4 设置文本输入框内容
在文本输入框上层处新增中继器（命名：选中标签），删除已有数据
调整中继器每项样式，标签矩形（70*30）
并增加关闭按钮，如下图所示
当选中/取消选中【选项组合】中的checkbox时，新增/删除一个行数据在输入框处中继器【选中标签】
并在【选项列表】中继器中标记/取消标记选中行
【选项列表】中继器中，补充每项加载时标记项的选中状态
设置关闭按钮交互事件
取消标记并更新对应项的【选项列表】中继器行
注：更新后，会联动触发【选项列表】中的checkbox的交互事件，进行删除行操作
Step5 文本框大小自适应
随着标签的增加与删除，文本框可输入区域需要跟随调整
- 【选中标签】中继器布局调整，适应文本框宽度
- 文本框的宽度及位置跟随标签数量变化
当【选项组合】中checkbox被选中/取消选中时
若文本框宽度大于一个【选中标签】宽度/小于初始文本框宽度时，以文本框右侧为锚点缩小/扩大一个标签项的宽度
非上种情况时，设置文本框宽度为初始宽度/最小宽度，并向上/下移动一个【选中标签】高度，且调整txtborder为合适尺寸
Step6 文本框筛选功能
文本框文本改变时，设置选项列表的筛选，筛选包含文本的【选项列表】项
6本文所涉及的Axure demo 可联系作者（yeq@wangsu.com）获得。