继续本系列Axure函数教程,上一篇文章主要给大家分享了Slice、Concat、Math.floor等字符串处理函数的使用,本篇文章将结合中继器给大家讲解IndexOf函数的使用。

案例效果,见下图:

Axure函数系列|使用字符串函数实现模糊搜索效果

描述:在搜索框输入关键词时,显示关键词列表,列表中的关键词文字中包含输入的关键词文字;鼠标单击列表中的关键词时,将该关键词填入搜索框;鼠标单击页面其他区域时,隐藏关键词列表。

元件准备:

Axure函数系列|使用字符串函数实现模糊搜索效果

  • 文本框(用于输入搜索内容):KeywordInput
  • 组合(用于统一显示隐藏关键词列表中的元件):KeywordGroup
  • 中继器(用于显示关键词列表项):keywordList
  • 文本标签(用于显示关键词列表项):Keyword

思路分析:

  • 创建关键词列表搜索框;
  • 搜索框中输入文字时,显示关键词列表;
  • 鼠标进入关键词列表时,列表项呈现粉红色文字和灰色背景;
  • 鼠标单击列表项时,将被单击列表项的文字写入搜索框中;
  • 鼠标单击页面其他位置时,隐藏关键词列表。

操作步骤:

(1)完成基础数据设置,即完成中继器中的关键词列表中数据集、交互以及样式的设置,

设置内容见下图:

Axure函数系列|使用字符串函数实现模糊搜索效果

(2)为文本框“KeywordInput”的【文字改变时】事件添加“case1”,设置条件判断【元件文字】“当前元件”(This)【!=】【值】“”(空值);添加满足条件时的动作为【显示】组合“KeywordGroup”。

条件判断设置见下图:

Axure函数系列|使用字符串函数实现模糊搜索效果

Case动作设置见下图:

Axure函数系列|使用字符串函数实现模糊搜索效果

(3)继续下一步,添加动作【添加筛选】到中继器“KeywordList”,设置筛选{名称}为“Search”,{条件}为“[[Item.Keyword.indexof(text)>=0]]”;条件公式的含义为:文本框中的文字在“item.Keyword”中首次出现的位置大于等于0,因为字符串中字符位置从0开始计算,所以当位置大于等于0时,表示文本框的文字包含在“Item.Keyword”中。

Case动作设置见下图:

Axure函数系列|使用字符串函数实现模糊搜索效果

其中使用到的函数说明:

IndexOf(参数1,参数2):查询参数1字符串在文本对象中首次出现的位置;参数1为查询内容的字符串;参数2位查询的起始位置,该参数可省略,省略是表示从左侧第一个位置开始查询;字符位置从0开始计算,即第一个字符位置为0;如果文本对象未 包含参数1字符串,获取到的数值为-1;使用方法“[[文本对象.indexOf(参数1,参数 2)]]”。

(4)在元件属性中,为文本标签“Keyword”设置【鼠标悬停】时的交互样式为橙色文字与灰色背景。

(5)为文件“Keyword”的【鼠标点击时】事件添加“case1”,设置动作为【设置文本】于文本框“KeywordInput”为【元件文字】“当前元件”(This)。

Case动作设置见下图:

Axure函数系列|使用字符串函数实现模糊搜索效果

(6)单击检视面板右上角的页面图标,或者在概要中单击页面名称,为页面的【页面鼠标单击时】事件添加“case1”,设置动作为【隐藏】组合“keywordGroup”。这个动作同样要添加在元件“KeyWordGroup”,这个动作同样要添加在元件“Keyword”【鼠标单击时】事件的“case1”中。

事件交互设置见下图:

Axure函数系列|使用字符串函数实现模糊搜索效果

Axure函数系列|使用字符串函数实现模糊搜索效果

好了,到此这篇关于Axure字符串函数的应用案例分享基本介绍完了,最后提供的是上述案例的原型模板的源文件下载,大家可以结合本文中的相关介绍进行理解消化。

https://pan.baidu.com/s/1rQOZML4MaDpJac3ZnMYWYw