//参数,中文字符串

function makePy(str){  

if(typeof(str) != "string")  

throw new Error(-1,"函数makePy需要字符串类型参数!")  

var arrResult = new Array() //保存中间结果的数组  

for(var i=0,len=str.lengthi<leni++){  

//获得unicode码  

var ch = str.charAt(i)  

//检查该unicode码是否在处理范围之内,在则返回该码对映汉字的拼音首字母,不在则调用其它函数处理  

arrResult.push(checkCh(ch))  

}  

//处理arrResult,返回所有可能的拼音首字母串数组  

return mkRslt(arrResult)  

}  

function checkCh(ch){  

var uni = ch.charCodeAt(0)  

//如果不在汉字处理范围之内,返回原字符,也可以调用自己的处理函数  

if(uni > 40869 || uni < 19968)  

return ch //dealWithOthers(ch)  

//检查是否是多音字,是按多音字处理,不是就直接在strChineseFirstPY字符串中找对应的首字母  

return (oMultiDiff[uni]?oMultiDiff[uni]:(strChineseFirstPY.charAt(uni-19968)))  

}  

function mkRslt(arr){  

var arrRslt = [""]  

for(var i=0,len=arr.lengthi<leni++){  

var str = arr[i]  

var strlen = str.length  

if(strlen == 1){  

for(var k=0k<arrRslt.lengthk++){  

arrRslt[k] += str  

}  

}else{  

var tmpArr = arrRslt.slice(0)  

arrRslt = []  

for(k=0k<strlenk++){  

//复制一个相同的arrRslt  

var tmp = tmpArr.slice(0)  

//把当前字符str[k]添加到每个元素末尾  

for(var j=0j<tmp.lengthj++){  

tmp[j] += str.charAt(k)  

}  

//把复制并修改后的数组连接到arrRslt上  

arrRslt = arrRslt.concat(tmp)  

}  

}  

}  

return arrRslt  

}  

//两端去空格函数  

String.prototype.trim = function() {    return this.replace(/(^\s*)|(\s*$)/g,"") }  

//查看拼音首字母缩写  

function query(){  

    var str = document.getElementById("txtChinese").value.trim()  

    if(str == "") return  

    var arrRslt = makePy(str)  

    alert(arrRslt)

{'hao':'\u58d5\u568e\u8c6a\u6beb\u90dd\u597d\u8017\u53f7\u6d69\u8585\u55e5\u5686\u6fe0\u704f\u660a\u7693\u98a2\u869d'}里面的"\u58d5"是汉字的代码

然后通过查找你的汉字和里面的匹配，找到前面的拼音，原理是这样的，但是在匹配的时候怎么快，这个在网上有人写好的插件，也可以自己写，一般情况是：遍历里面的所有的，直到找到或者遍历完成，当然汉字的变慢在你的范围内。还有另外的，就是将汉字编码是有顺序大小的，可以排好序，然后再找前面的英文。

完成了之后觉得可以在公众号里给大家分享一下，给有需要的人一个参考吧。

项目框架用的是react，所以先creat-react-app

比如create-react-app pinyin

渲染选择框的组件用的是antd的Select组件，所以需要先引入antd，具体引入的方法参照antd官方文档，已经写得很清楚了

以上准备工作做好后，目前的目录结构应该如下图所示：

├── README.md

├── package.json

├── package-lock.json

├── config-overrides.js

├── public

│    ├── favicon.ico

│    ├──index.html

      └── manifest.json

├── src

│   ├── App.css

│   ├── App.js

│   ├── App.test.js

│   ├── index.css

│   ├── index.js

│   ├──logo.svg

│   └── registerServiceWorker.js

现在在src文件夹下新建一个components文件夹，components文件夹中新建一个SelectPinYin文件夹，SelectPinYin文件夹下新建一个index.js和PinYin.js

PinYin.js文件中主要放置拼音和各个拼音对应的中文字符串，方便组件调用

export const SimplePinYin = {

py: [

        [ 'a','阿啊呵腌吖锕啊呵嗄啊呵啊呵阿啊呵' ],

        [ 'ai','哀挨埃唉哎捱锿呆挨癌皑捱矮哎蔼霭嗳爱碍艾唉哎隘暧嗳瑷嗌嫒砹' ],

        [ 'an','安谙鞍氨庵桉鹌厂俺铵揞埯案按暗岸黯胺犴' ],

        [ 'ang','肮昂盎' ],

        [ 'ao','熬凹熬敖嚣嗷鏖鳌翱獒聱螯廒遨袄拗媪奥澳傲懊坳拗骜岙鏊' ],

        [ 'ba','八吧巴叭芭扒疤笆粑岜捌八拔跋茇菝魃把靶钯把爸罢霸坝耙灞鲅吧罢' ],

        [ 'bai','掰白百摆伯柏佰捭败拜呗稗' ],

        [ 'ban','般班搬斑颁扳瘢癍版板阪坂钣舨办半伴扮瓣拌绊' ],

        [ 'bang','帮邦浜梆膀榜绑棒膀傍磅谤镑蚌蒡' ],

[ 'bao','包胞炮剥褒苞孢煲龅薄雹保宝饱堡葆褓鸨报暴抱爆鲍曝刨瀑豹趵' ],

        [ 'bei','背悲杯碑卑陂埤萆鹎北被备背辈倍贝蓓惫悖狈焙邶钡孛碚褙鐾鞴臂呗' ],

...

]

}

内容太多，只能复制这样一小部分，其余部分可以参考下面这条链接，然后改成上面那种格式就可以了。

http://www.cnblogs.com/meteoric_cry/p/5954547.html

接下来开始写组件

要做到拼音搜索匹配到中文，所以调用this.selectPinYin函数，下面开始写selectPinYin函数

当input为中文时：

return option.props.children.toLowerCase().indexOf( input.toLowerCase() ) >= 0

当input为字母时：

const value = option.props.children.toLowerCase().split( '' )

const newValue = value.map( item =>this.chineseChangePY( item ) ).join( '' )

return newValue.indexOf( input.toLowerCase() ) >= 0

思路：

①    将列表中的每项内容，即option.props.children转成小写（万一不全是中文），然后进行分割，split('')把字符串转成数组

②    遍历得到的数组，并把每一个元素传递给chineseChangePY函数

③    chineseChangePY函数的作用：如果元素不是中文，直接返回；如果是中文，遍历PinYin.js中的数组，与每个子数组的第二个元素即中文字符串对比，如果元素在这个中文字符串里，返回中文字符串所在数组的第一个元素，即所需要的拼音

④    将处理过的数组转成字符串

⑤    和input进行对比，存在返回true，不存在返回false

bug说明： 比如遇到生僻字的时候，PinYin.js中没有收录进这个中文，就无法匹配。比如遇到多音字的时候，“藏”：既可以cang也可以zang，cang排在zang前面，当遍历匹配的时候遇到cang就已经返回了，所以如果有用户输入zang就匹配不到藏字。

如果有更好的方法，欢迎讨论交流。