在Web浏览器中,根据用户输入到文本框中的文本来动态筛选中继器元件。使用逻辑运算符“&&”(和)和“||”(或)来创建可一次判断多个条件的复合筛选条件表达式。
如果你不熟悉中继器元件,你可以在我们的中继器元件参考指南中了解它的功能和使用方法,你也可以从我们的中继器基础教程开始。
STEP 0:下载中继器练习文件
如果你还没有练习文件,请下载Axure中继器练习文件.rp并在Axure RP中打开它,该文件包含了Axure中继器教程中对应的每个页面。
STEP 1:当文本框中有文本时添加动态文本筛选器
在中继器练习文件中打开“高级筛选”页面,在画布上有一个3×3的中继器,显示了一些书籍,还有一个将被我们用于筛选中继器的文本框元件。正如文本框的标签所表明的,用户能够通过作者姓名或书名搜索(筛选),让我们首先来设置作者筛选器。
选中“搜索框”文本框元件,然后双击“文本改变时”来添加一个新的文本改变时用例。
在用例编辑器的顶部,点击“添加条件”按钮以打开条件设立窗口。
在条件设立窗口中,将第三个下拉列表的选项“==”改成“!=”,从而使条件描述显示为“if 文字于 This != “””。当“搜索框”文本框不为空的时候这个条件就会成立,也就是说用户在Web浏览器中向搜索框中输入了文本。
点击“确定”按钮关闭条件设立窗口。
回到用例编辑器中,点击左侧“添加动作”栏中的“添加筛选”(位于“中继器”下面),在右侧“配置动作”栏中选择“书籍”中继器元件。
在右侧“配置动作”栏的底部,保持“移除其他筛选”的勾选状态,如果你需要,可以为此筛选输入一个名称,然后在条件字段中输入“[[Item.Author.toLowerCase().indexOf(This.text.toLowerCase()) >= 0]]”(不含引号)。
点击“确定”按钮关闭用例编辑器。
在这个表达式中有很多过程,所以让我们一个一个来分解。
“Item.Author”是数据集的列,它的值将被用于筛选。
“.toLowerCase()”是一个JavaScript字符串方法,可将字符串中的所有字母转换为小写字母,我们对数据集的值以及用户输入的搜索文本调用此方法,从而使搜索可以不区分大小写。(如果你希望搜索区分大小写,请从表达式中删除此方法的两个实例。)
“.indexOf()”是一个JavaScript字符串方法,用于在它所调用的字符串(在本用例中就是数据集“Author”列的值)中搜索括号中所提供的特定值(在本用例中就是文本框中的文本),如果找到该值,那么该方法返回一个数字,表示特定值在被搜索字符串中的起始索引值。(这样可以在被搜索字符串中的任意位置找到搜索值,而不仅仅在最开始;例如“BCD”可以在“ABCD”中找到。)如果未找到该值,那么该方法返回数字-1。
“This.text”是一个Axure RP表达式,它代表当前正在触发事件的元件上的文本,在本用例中就是“搜索框”文本框中的文本。
“>=0”表示如果indexOf()方法返回的值大于或等于0,即如果在被搜索字符串中的任意位置找到要搜索的值,则该表达式为“真”。(如果你希望搜索仅匹配被搜索字符串的开头,请将“>=0”改为“==0”。)
总之,此值表达式将在“Author”列中搜索出包含“搜索框”中输入的文本的所有行,并且筛选器将仅显示那些行。
(注意:在Axure RP中,你可以通过编辑值对话框中的“插入变量或函数…”菜单,查看所有可用的对象和方法。)
STEP 2:当文本框为空时移除筛选
在“搜索框”文本框元件被选中的状态下,再次双击检视窗格属性页签下的“文本改变时”来添加第二个文本改变时用例。
在用例编辑器中,点击左侧“添加动作”栏中的“移除筛选”动作(位于“中继器”下面),然后在右侧“配置动作”栏中选择“书籍”中继器元件。
在右侧“配置动作”栏的底部,勾选“移除全部筛选”的复选框,然后点击“确定”按钮关闭用例编辑器。
注意即使我们没有给这个用例设置条件,它让然会显示“Else If True”的条件。当第一个条件没有通过的时候将会触发这个用例,也就是说,在Web浏览器中,“搜索框”文本框再次为空的时候。
STEP 3:预览
在Web浏览器中预览页面,并且尝试搜索“书籍”中继器数据集中的一个作者。注意你在筛选条件中使用的“>=0”,你既可以用名也可以用姓来搜索。如果你用的“==0”,然而由于名在“Author”数据列的首位,因此你必须以名来搜索。
然后,清空文本框以移除中继器的筛选。
STEP 4:创建符合筛选条件
回到Axure RP中,再次选中“搜索框”文本框元件,然后在检视窗格中的属性页签下,双击“文本改变时”下面的“Case1”来编辑用例中的动作。
在用例编辑器中,在“组织动作”栏中选中添加筛选动作,在右侧“配置动作”栏的底部,点击“条件”文本框右侧的“fx”按钮以打开编辑值对话框。
在对话框的顶部,将光标放到双封闭的方括号“]]”中,然后输入一个空格和两个竖杠符号“||”,以创建运算符“或”。(竖杠符号通常在回车键上方,你也可以通过点击“插入标量或函数…”,在弹出的菜单中向下滚动到底部来选择该操作符。)如果当前的表达式返回“false”这将允许我们引入另一个表达式进行判断。
在“或”运算符后面输入一个空格及“Item.Title.toLowerCase().indexOf(This.text.toLowerCase()) >= 0”(不含引号),注意,除了数据集的“Author”列换成了“Title”列,这个表达式看起来和第一个表达式相同。
整个筛选条件的表达式现在应该为“[[Item.Author.toLowerCase().indexOf(This.text.toLowerCase()) >= 0 || Item.Title.toLowerCase().indexOf(This.text.toLowerCase()) >= 0]]”。这样将会找到在 “Author”或“Title”列中包含“搜索框”中输入文本的所有行,并且筛选器将仅显示那些行。实际上,这样可以使用户使用同一个搜索框来按照作者或者书名来搜索。
点击“确定”按钮关闭编辑值对话框,然后再次点击“确定”按钮关闭用例编辑器。
STEP 5:预览
在Web浏览器中预览页面,尝试搜索“书籍”中继器中的一个书名,然后清空搜索框,再按作者进行搜索。两种搜索方式都可以正常工作。