Axure实现汉字拼音首字母查询(非JS版)

axure商城

上图就是我们要实现的目标:输入一个汉字能够查到它的拼音首字母。

实际上,明白了实现原理之后,通过汉字查拼音、查声母都是可以实现的。

关键在于有没有一个能够使用的源数据。

我们先来看看元件的准备工作。

上面这张图,大家能够看到这个案例使用的所有元件。

最关键的就是命名为“PinYin”的这个元件,它的文字包含了所有的文字以及对应的拼音首字母。

源数据下载:http://downloads.iaxure.com/pinyin.txt

大家可以下载源数据文件,复制里面的内容,粘贴到Axure编辑区中即可。

我们能够看到源数据的格式有一定的规律:[相同拼音首字母的所有文字][拼音首字母][逗号]......

那么,试想一下,当我们输入一个文字点查询时:

1、查询到汉字在源数据中出现的位置;

2、从查询到的位置向后查询逗号所在的位置;

3、获取到逗号所在位置前一位的拼音首字母。

完美!

所以,当我们准备好元件(注意将元件“PinYin”缩小尺寸后隐藏),就可以添加交互了。

交互如上图所示:

查找按钮“Search”【鼠标单击时】,添加用例与动作:【设置文字】于元件“Result”为一个公式...

具体公式是什么样子的呢?

如下图所示:

公式的完整内容是:“汉字的首字母是:[[p.charAt(p.indexOf(\',\',p.indexOf(w))-1)]]”。

简单说明一下:

  • “p”和“w”是两个局部变量,分别存入了源数据和输入的汉字内容;
  • “p.charAt()”能够获取指定位置的字符;
  • “p.indexOf(w)”能够获取汉字在源数据中出现的位置。
  • “p.indexOf(\',\',p.indexOf(w))-1”能够从汉字位置开始向右查找逗号所在的位置,找到的位置减1就是拼音首字母的位置。

这里值得一提的是“indexOf()”这个函数,它能够由左至右的从一个字符串中查询参数字符串出现的位置,它有两个参数,分别是“被查询的字符串”和“查询的起始位置”,如果没有提供第二个参数默认从最左侧向右查询。

好了,到这里这个案例就完成了。

希望大家能够从这个案例中学习到有用的知识点。

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

源文件下载:http://downloads.iaxure.com/search_pinyin.rp

本文由 Axure中文网 作者:小楼一夜听春语 发表,其版权均为 Axure中文网 所有,文章内容系作者个人观点,不代表 Axure中文网 对观点赞同或支持。如需转载,请注明文章来源。
6

评论:

6 条评论,访客:6 条,站长:0 条

0%好评

  • 好评:(0%)
  • 中评:(0%)
  • 差评:(0%)

最新评论

  1. 晴空之夏
    晴空之夏发布于: 

    indexof函数两个参数,分别是“被查询的字符串”和“查询的起始位置”这个搜索起始位置,在我机子上怎么都测试不出来功能

  2. 许天杰
    许天杰发布于: 

    Xu Tianjie 许天杰许天杰 微信电话:15810307266 QQ号码:815855695/1029751486

  3. 陆秋之
    陆秋之发布于: 

    公式有错误。单引号不需要转义,双引号即可。是因为win系统的原因?

  4. chaoticme
    chaoticme发布于: 

    我1:1照抄的,为什么输出了“汉字的首字母是:[[p.charAt(p.indexOf(\’,\’,p.indexOf(w))-1)]]”这么多内容?另外,论坛没给我发验证邮箱的邮件啊。。谢谢先

    • huayue
      huayue发布于: 

      我输出也是那个公式,可能那个公式有问题。

    • 陆秋之
      陆秋之发布于: 

      公式里的单引号前面加了斜杠,应该是转义,但此处不需要转义,用双引号把逗号括起来就可以了。

发表评论