上圖就是我們要實現的目標：輸入一個漢字能夠查到它的拼音首字母。
實際上，明白了實現原理之後，通過漢字查拼音、查聲母都是可以實現的。
關鍵在於有沒有一個能夠使用的源數據。
我們先來看看元件的準備工作。
上面這張圖，大家能夠看到這個案例使用的所有元件。
最關鍵的就是命名爲“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()”這個函數，它能夠由左至右的從一個字符串中查詢參數字符串出現的位置，它有兩個參數，分別是“被查詢的字符串”和“查詢的起始位置”，如果沒有提供第二個參數默認從最左側向右查詢。
好了，到這裏這個案例就完成了。
希望大家能夠從這個案例中學習到有用的知識點。
源文件下載：
本文由 Axure中文網 作者：小樓一夜聽春語 發表，其版權均爲 Axure中文網 所有，文章內容系作者個人觀點，不代表 Axure中文網 對觀點贊同或支持。如需轉載，請註明文章來源。