主要内容

在QQ使用中我们在搜索框输入关键字可检索需要的联系人，并可以添加到已联系人列表，删除搜索关键字，切换到分组联系人列表，本课来学习如何实现这个交互。交互中会使用Axure里面的中继器、变量、函数。

交互效果

3.在检索输入框输入检索关键字，检索并显示包含关键字的联系人；删除检索关键字，切换到联系人分组列表。

4.搜索联系人列表中的联系人，可点击添加为已选联系人。

原型接着上一节课做交互

四、设置“文字改变时”事件

步骤6：

选中搜索输入框，双击“文字改变时”事件，打开用例编辑器

用例1：

编辑条件：如果部件值长度.当前部件.= (为空)

动作1：选择“移除过滤器”，第四步选择“筛选”中继器，勾选“移除所有过滤”

动作2：选择“设置面板状态”，第四步选择“联系人”，选择状态到状态1

用例2：

编辑条件：如果部件文字.当前部件.≠ (为空)（if 部件文字 当前部件 ≠ ""）

动作1：选择“移除过滤器”，第四步选择“筛选”中继器，勾选“移除所有过滤”

动作2：选择“等待”，等待0秒

动作3：选择“设置文本”，第四步选择“关键字判断”，将文本值设置为“点击下面的“fx”，在编辑值窗口，新增局部变量：LVAR1=部件·文本框（单行）

点击插入变量...选择字符串函数：indexOf('searchValue')，选中“LVAR”选择中继器下面的“I”，选中'searchValue'，选择“LVAR1”（设置值为：[[I.indexOf(LVAR1)]]）

动作4：选择“新增过滤器”，第四步选择：筛选（中继器），点击规则后“fx”，在编辑窗口，点击插入变量..，选择中继器下面的“isMarked”
选中用例2，选择“切换IF/ELSE IF

步骤7：

选中“关键字判断”双击“文字改变时”事件，打开用例编辑器
用例1

编辑条件：值.[[T]].≠ .值 .-1（设置条件为：if "[[T]]" ≠ "-1"）

动作1：选择“标记行”，第四步选择““筛选（中继器）”
用例2

选择“取消标记行，第四步选择““筛选（中继器）”

五、设置“鼠标单击时”事件

步骤8：

打开联系人“筛选（中继器)的编辑区，选中“name”，双击“鼠标单击时”事件，打开用例编辑器

编辑条件：选择“变量值”不包含·值·点击后面的“fx”，在编辑值窗口，新增局部变量：LVAR1=部件·当前部件

点击插入变量...选择部件下面确的“text”，再选中“This”，选择“LVAR1”（设置条件“if 变量 OnLoadVariable 不包含 "[[LVAR1.text]]”）

动作1：选择“设置变量值”

第四步：选择“OnLoadVariable”，设置变量值为，点击“fx”，打开编辑值窗口，新增局部变量：LVAR1=部件·当前部件

点击插入变量...选择字符串函数“concat('string')”，选中“LVAR”选择“OnLoadVariable”，再选中“'string'，选择部件下的“text”，再选中“This”，选择“LVAR1”（设置值为：[[OnLoadVariable.conca)]]）

动作2：选择“新增行”

第四步：选择“中继器”，点击新增行打开编辑窗器，点击“name”下面的“fx”，在编辑值窗口，点击点击插入变量..，选择部件下的“text”

步骤9：
制作完成，生成原型预览效果