<script>
window.location.href='http://网址/list-catid-"+document.getElementById("caixi").value+"-aid-"+document.getElementById("diqu").value +"'
</script>
最近工作中接到了一个需求：一个项目列表，项目名称可能有中文可能有英文，如果是中文的话，需要实现用户输入项目的拼音即可筛选到对应项目的功能。
完成了之后觉得可以在公众号里给大家分享一下，给有需要的人一个参考吧。
项目框架用的是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就匹配不到藏字。
如果有更好的方法，欢迎讨论交流。
一：对文章关键字的搜索（数组的方法）：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#search{
height:40pxwidth: 200pxfont-size: 30pxtext-align: center
}
#div {
font-size: 20pxwidth: 600px
}
#div span{
color: red
}
</style>
</head>
<body >
<input type="text" name="search" id="search" value="馋" onclick="this.value='' "/>
<input type="button" name="" id="bbtn" value="搜索" />
<div id="div">
<p>馋，在英文里找不到一个十分适当的字。罗马暴君尼禄，以至于英国的亨利八世，在大宴群臣的时候，常见其撕下一根根又粗又壮的鸡腿，举起来大嚼，旁若无人，好一副饕餮相！但那不是馋。埃及废王法鲁克，据说每天早餐一口气吃二十个荷包蛋，也不是馋，只是放肆，只是没有吃相。对有某一种食物有所偏好，于是大量的吃，这是贪多无厌。馋，则着重在食物的质，最需要满足的是品味。上天生人，在他嘴里安放一条舌，舌上还有无数的味蕾，教人焉得不馋？馋，基于生理的要求；也可以发展成为近于艺术的趣味。
也许我们中国人特别馋一些。馋字从食，有声。毚音谗，本义是狡兔，善于奔走，人为了口腹之欲，不惜多方奔走以膏馋吻，所谓“为了一张嘴，跑断两条腿”。</p>
</div>
<script type="text/javascript">
var bbtn=document.getElementById('bbtn')
var search=document.getElementById('search')
var text=document.getElementsByTagName('p')[0]
var text1=text.innerHTML
var arr=[]
var str=text1
bbtn.onclick=function(){
str=text1
arr=search.value
str=str.split(arr).join('<span>'+arr+'</span>')
text.innerHTML=str
}
</script>
</body>
</html>
二：对li表单的搜索：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0margin: 0
}
#content{
margin: 100px 300pxdisplay: block
}
input{
height: 50pxwidth: 400pxfont-size: 30pxline-height: 50px
}
ul{
}
li{
margin:10px 0pxdisplay: block
}
</style>
</head>
<body>
<div id="content">
<ul>
<input type="" name="" id="" value="" placeholder="请输入城市的名称或拼音"/>
<li pname="北京" cname="bj">北京</li>
<li pname="株洲" cname="zz">株洲</li>
<li pname="上海" cname="sh">上海</li>
<li pname="长沙" cname="cs">长沙</li>
<li pname="杭州" cname="hz">杭州</li>
<li pname="天津" cname="tj">天津</li>
<li pname="西安" cname="xa">西安</li>
<li pname="成都" cname="cd">成都</li>
<li pname="武汉" cname="wh">武汉</li>
<li pname="南京" cname="nj">南京</li>
</ul>
</div>
<script type="text/javascript">
var li=document.getElementsByTagName('li')
var text=document.getElementsByTagName('input')[0]
function search(){
var arr=text.value
for(var i=0i<li.lengthi++)
{
li[i].style.display="none"
if(li[i].getAttribute('pname').indexOf(arr)!=-1||li[i].getAttribute('cname').indexOf(arr)!=-1)
{
li[i].style.display="block"
}
}
}
text.oninput=function(){
search()
}
</script>
</body>
</html>
