搜索
AxureRP8使用技巧定制搜索输入框制作搜索框/输入框的下拉列表跟随提示，分三种形式。案例一：搜索框/输入框一案例二：搜索框/输入框二案例三：搜索框/输入框三元件：文本框、中继器、水平线、文本标签、图片、动态面板。分布如下：案例\元件文本框中继器水平线文本标签图片动态面板案例一√√√案例二√√√√√案例三√√√√√√原理：主要是中继器的使用、字符串函数的使用、动态面板的使用。其中案例二以案例一为基础，案例三以案例二为基础。1、通过中继器的数据管理功能，在中继器显示前添加筛选动作，然后加载筛选出的各项。注：在数据集添加数据列“SearchOption”。2、在中继器数据集页面，添加数据列和数据。3、在中继器数据集页面，在矩形框中，设置或增加显示数据列的元件（如文本标签、矩形、图片等）及名称。4、回到主页面，添加中继器的交互事件，在“每项加载时”事件中，针对各数据列对应的元件设置文字显示。5、在文本输入框元件为中继器“添加筛选”：选中文本输入框，选择交互事件“文本改变时”，在添加动作中选择中继器的“添加筛选”，然后在配置动作中选择中继器，设置动作条件。最后编辑条件，也就是中继器的筛选要求，将符合条件的数据项选出。使用字符串函数indexOf判断中继器的数据项是否包含文本框中的数据，如[[Item.SearchOption.indexOf(LVAR1)=0]]其中LVAR1是为文本输入框的文字设置的局部变量。1.搜索框/输入框一方法与步骤：1、从元件库拖入【文本框】和【中继器】，将【中继器】设置为“隐藏”。2、选中【中继器】，在属性中设置名称（Name）为“RPL_SearchOption“。如下图。说明：此处【中继器】中的数据为步骤3中设置的数据集，【中继器】初始状态为空。3、双击【中继器】，进入中继器配置页面。在“数据集”中将第1列改名为“SearchOption”，并添加数据行。如下图。设置完成后，可以调整矩形框长、宽，返回原页面查看效果和调整元件位置。4、在中继器配置页面选中矩形，选择样式，去掉矩形边框的上线。如下图。注：此处在Axure7.0中是在属性中选择形状（开口向上的矩形框）。5、在中继器配置页面拖入【水平线】，调整位置及长度，使其位于矩形框的上部，长度等于矩形框长度。在选中水平线的状态下，为水平线在属性名称中命名为“HL_TopBorder”，并勾选“隐藏”属性。6、返回到原页面，调整文本框和中继器的大小和位置。7、在原页面选择中继器，在属性中添加“交互”事件。（此中继器交互事件为系统默认自动创建，如果系统没有自动创建，则按照以下步骤进行添加）选取“每项加载时”：双击或点击“+”，弹出：在“添加动作”中选择“设置文本”，在配置动作中选择矩形框，然后点击“fx”，弹出“编辑文本”窗口，点击“插入变量或函数…”，在下拉列表中选取Item.SearchOption。8、继续添加【中继器】“每项加载时”交互事件，双击或点击“+”按钮点击“添加条件”：在“条件设立”中选择“值”、第一个fx为“Item.isFirst”，第二个fx中输入“true”。确定后，回到动作配置，“添加动作”中选择“显示”，“配置动作”中勾选水平线。在“交互”事件中，右击刚才添加的事件，切换为if至此，得到中继器的交互事件如下：9、为文本框添加交互事件。添加事件的方法同上。添加事件的基本过程是：选择事件添加条件添加动作配置动作。文本框的交互事件如下：Case1：如果文本框不为空：在文本框的“交互”事件中添加中继器的“筛选”动作；在配置动作中，为文本框添加局部变量；插入函数：如果Item.SearchOption.indexOf(LVAR1)=0则显示中继器Case2：如果文本框为空，则隐藏中继器。2.搜索框/输入框二在“搜索框/输入框一”的基础上，修改中继器的数据集和矩形框中显示的内容。1、中继器数据集：增加一列“SummaryLine”：2、矩形框：在矩形框内添加3个元件：一个图片、两个文本标签（名称分别为：LBL_Name、LBL_SummaryLine）3、修改中继器的交互事件：让文本标签分别对应中继器数据集中的列。3.搜索框/输入框三在“搜索框/输入框二”的基础上，修改中继器的数据集和矩形框中显示的内容。1、中继器数据集增加一列：2、动态面板在中继器配置页面，选取矩形框、图片、两个文本标签等4个元件（除去最上面的水平线外），在右击菜单中选择“转换为动态面板”，即可生成动态面板，并命名为DP_List_Items。将当前面板的状态改名为Result_Item，在选中时右击显示右键菜单，选择“复制状态”，将新生成的动态面板的状态改名为Category_Item。说明：使用动态面板对中继器数据集显示的两种情况进行分别设置，即对应动态面板的两个状态，并调整数据集的数据项（ItemType为category）的高度。打开动态面板的状态Category_Item进行修改，用于展示分组标题：保留矩形和1个文本标签，删除其他元件，调整位置、大小及字体。将文本标签命名为LBL_CategoryName。3、设置全局变量ItemOffset。操作菜单：项目全局变量…4、修改中继器事件回到原页面，选中中继器，更新其交互事件。其中，设置文本标签LBL_CategoryName的文字；移动动态面板：x:0,y:ItemOffset另外，在“每项加载时”对ItemType进行判断。如果ItemType为category，则设置动态面板的状态为Category_Item，并将全局变量ItemOffset减去30（动态面板中矩形框的高度）。否则，如果是最后一项，则将全局变量ItemOffset置0。5、更新文本框的交互事件：在显示中继器的事件中添加条件：[[Item.SearchOption.indexOf(LVAR1)=0||Item.ItemType=='category']]