完成了之后觉得可以在公众号里给大家分享一下，给有需要的人一个参考吧。
项目框架用的是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就匹配不到藏字。
如果有更好的方法，欢迎讨论交流。
英文缩写(计算机) JS = JavaScript明星组合 JS = Justin和Sophia， 哥哥——陈忠义 (Justin) 和 妹妹——陈绮萱 (Sophia)拼音(网络用语)JS=Jin Sha,金莎，中国大陆流行人气女歌手和当红女艺人，2005年发行首张个人音乐专辑 《空气》后迅速串红；曾于师兄林俊杰合唱林俊杰创作的第一首男女对唱情歌——《被风吹过的夏天》而家喻户晓。而后在《神话》中扮演吕素自编一首《星月神话》在百度榜单占据16周之久。气质清纯，嗓音甜美的金莎，近年来转战影视界，成功主演了《幸福的眼泪》、《大城市小浪漫》、《神话》等多部热播大剧而成为内地娱乐圈红人。JS = Jian Shang，奸商，指代了一群特殊人群，他们通过倒卖游戏中的各种装备材料等来获取丰厚的利润。现在JS更多用以指代现实中的奸商特别是攒机商，但是网友立场几乎一边倒地站在商家反方，于是无论商家好坏都叫JS。随着IT业发展，攒机商利润已经很薄，这种对立情绪也淡了很多。但是代称还是没有变，JS逐渐演变成“商家”的一种代称，有一种戏谑的成分。JS=Jiang Su，江苏，我国东部的一个省份。经常用在江苏某个机构的缩写名称中，如JSBC代表江苏广电总台。JS = Jian Shi，剑侍，QQ三国中精通战斗技巧的勇士，以剑为武器。低命中、高闪避、高爆击是剑侍的特色。他们还懂得如何更有效的激怒敌人，控制战斗节奏。如何在短时间秒杀敌人才是一名剑侍应该考虑的事情。JS = Jiang Shi，僵尸，反恐精英Online中生化模式中的僵尸阵营；JavaScript代码有时也称作僵尸代码。JS = Ji Si，祭司，春秋Q传中具有着无上高贵气质的秦青一直是列国诸侯争相膜拜的对象，传说她已经传承了上古天神女娲的神圣法术，可赋予人类强大的生存力量。JS = Jia Su，加速线，衡量股价涨速的工具,加速线指标上升表明股价上升动力增加,加速线指标下降表明股价下降压力增加。JS = Ji Shi，桑拿里技师的意思。JS = Jun Shi，俊士，欧珀莱一款男性化妆品系列。JS = Ju Xing, “聚星天华”自2006年1月推出第一个产品至今，经过一年时间，现已成为青春流行纸媒领域最著名的品牌标志之一。js这一用语多见于百度贴吧内。JS= jian sheng “剑圣”魔兽争霸中兽人英雄，英文缩写为BM，因为疾风步的原因，又美其名曰“贱圣”其他JS = JSharer， 极享网盘，ACG迷的主流网盘。JS = jiān shāng 网络用语，代指奸商 JS = Jack Sparrow 加勒比海盗里的杰克船长JS电脑方面有两个方面的缩写意义.JS是脚本语言javascript的缩写,该语言一般用在浏览器等相关脚本中使用,当然也可以用在ASP的服务器端,这种语言是一种边解释边执行的语言,不需要进行编译,所以没有编译态.
由于玩电脑时常与硬件打交道,这种情况下,可能与不少商家要打交道的.而有些不良的商家以次充好,忽悠买主,这类的商家我们称之为"奸商"用JS(汉语拼音的两个字母),还有商家拿水货当行货买,本打算买行货,一不小心买成了水货!这类的商家店里十之八九没有真东西,差不多都是假货,所以如果称他们为"假商(JS)"也是可以了,但奸商与假商在汉语中区别不大,看到JS时,无论是奸商还是假商都是让人可恨的!所以JS可以直接认为是奸商!
