js 获取中文拼音,Select自动匹配字母获取值的代码


Posted in Javascript onSeptember 23, 2009
<script type="text/javascript"> 
var key2code = {65:"a",66:"b",67:"c",68:"d",69:"e",70:"f",71:"g",72:"h",73:"i",74:"j", 
75:"k",76:"l",77:"m",78:"n",79:"o",80:"p",81:"q",82:"r",83:"s",84:"t", 
85:"u",86:"v",87:"w",88:"x",89:"y",90:"z",49:"1",50:"2",51:"3",52:"4", 
53:"5",54:"6",55:"7",56:"8",57:"9",48:"0" 
}; 
</script> 
<script language=javascript> 
var spell = {0xB0A1:"a", 0xB0A3:"ai", 0xB0B0:"an", 0xB0B9:"ang", 0xB0BC:"ao", 0xB0C5:"ba", 0xB0D7:"bai", 0xB0DF:"ban", 0xB0EE:"bang", 0xB0FA:"bao", 0xB1AD:"bei", 0xB1BC:"ben", 0xB1C0:"beng", 0xB1C6:"bi", 0xB1DE:"bian", 0xB1EA:"biao", 0xB1EE:"bie", 0xB1F2:"bin", 0xB1F8:"bing", 0xB2A3:"bo", 0xB2B8:"bu", 0xB2C1:"ca", 0xB2C2:"cai", 0xB2CD:"can", 0xB2D4:"cang", 0xB2D9:"cao", 0xB2DE:"ce", 0xB2E3:"ceng", 0xB2E5:"cha", 0xB2F0:"chai", 0xB2F3:"chan", 0xB2FD:"chang", 0xB3AC:"chao", 0xB3B5:"che", 0xB3BB:"chen", 0xB3C5:"cheng", 0xB3D4:"chi", 0xB3E4:"chong", 0xB3E9:"chou", 0xB3F5:"chu", 0xB4A7:"chuai", 0xB4A8:"chuan", 0xB4AF:"chuang", 0xB4B5:"chui", 0xB4BA:"chun", 0xB4C1:"chuo", 0xB4C3:"ci", 0xB4CF:"cong", 0xB4D5:"cou", 0xB4D6:"cu", 0xB4DA:"cuan", 0xB4DD:"cui", 0xB4E5:"cun", 0xB4E8:"cuo", 0xB4EE:"da", 0xB4F4:"dai", 0xB5A2:"dan", 0xB5B1:"dang", 0xB5B6:"dao", 0xB5C2:"de", 0xB5C5:"deng", 0xB5CC:"di", 0xB5DF:"dian", 0xB5EF:"diao", 0xB5F8:"die", 0xB6A1:"ding", 0xB6AA:"diu", 0xB6AB:"dong", 0xB6B5:"dou", 0xB6BC:"du", 0xB6CB:"duan", 0xB6D1:"dui", 0xB6D5:"dun", 0xB6DE:"duo", 0xB6EA:"e", 0xB6F7:"en", 0xB6F8:"er", 0xB7A2:"fa", 0xB7AA:"fan", 0xB7BB:"fang", 0xB7C6:"fei", 0xB7D2:"fen", 0xB7E1:"feng", 0xB7F0:"fo", 0xB7F1:"fou", 0xB7F2:"fu", 0xB8C1:"ga", 0xB8C3:"gai", 0xB8C9:"gan", 0xB8D4:"gang", 0xB8DD:"gao", 0xB8E7:"ge", 0xB8F8:"gei", 0xB8F9:"gen", 0xB8FB:"geng", 0xB9A4:"gong", 0xB9B3:"gou", 0xB9BC:"gu", 0xB9CE:"gua", 0xB9D4:"guai", 0xB9D7:"guan", 0xB9E2:"guang", 0xB9E5:"gui", 0xB9F5:"gun", 0xB9F8:"guo", 0xB9FE:"ha", 0xBAA1:"hai", 0xBAA8:"han", 0xBABB:"hang", 0xBABE:"hao", 0xBAC7:"he", 0xBAD9:"hei", 0xBADB:"hen", 0xBADF:"heng", 0xBAE4:"hong", 0xBAED:"hou", 0xBAF4:"hu", 0xBBA8:"hua", 0xBBB1:"huai", 0xBBB6:"huan", 0xBBC4:"huang", 0xBBD2:"hui", 0xBBE7:"hun", 0xBBED:"huo", 0xBBF7:"ji", 0xBCCE:"jia", 0xBCDF:"jian", 0xBDA9:"jiang", 0xBDB6:"jiao", 0xBDD2:"jie", 0xBDED:"jin", 0xBEA3:"jing", 0xBEBC:"jiong", 0xBEBE:"jiu", 0xBECF:"ju", 0xBEE8:"juan", 0xBEEF:"jue", 0xBEF9:"jun", 0xBFA6:"ka", 0xBFAA:"kai", 0xBFAF:"kan", 0xBFB5:"kang", 0xBFBC:"kao", 0xBFC0:"ke", 0xBFCF:"ken", 0xBFD3:"keng", 0xBFD5:"kong", 0xBFD9:"kou", 0xBFDD:"ku", 0xBFE4:"kua", 0xBFE9:"kuai", 0xBFED:"kuan", 0xBFEF:"kuang", 0xBFF7:"kui", 0xC0A4:"kun", 0xC0A8:"kuo", 0xC0AC:"la", 0xC0B3:"lai", 0xC0B6:"lan", 0xC0C5:"lang", 0xC0CC:"lao", 0xC0D5:"le", 0xC0D7:"lei", 0xC0E2:"leng", 0xC0E5:"li", 0xC1A9:"lia", 0xC1AA:"lian", 0xC1B8:"liang", 0xC1C3:"liao", 0xC1D0:"lie", 0xC1D5:"lin", 0xC1E1:"ling", 0xC1EF:"liu", 0xC1FA:"long", 0xC2A5:"lou", 0xC2AB:"lu", 0xC2BF:"lv", 0xC2CD:"luan", 0xC2D3:"lue", 0xC2D5:"lun", 0xC2DC:"luo", 0xC2E8:"ma", 0xC2F1:"mai", 0xC2F7:"man", 0xC3A2:"mang", 0xC3A8:"mao", 0xC3B4:"me", 0xC3B5:"mei", 0xC3C5:"men", 0xC3C8:"meng", 0xC3D0:"mi", 0xC3DE:"mian", 0xC3E7:"miao", 0xC3EF:"mie", 0xC3F1:"min", 0xC3F7:"ming", 0xC3FD:"miu", 0xC3FE:"mo", 0xC4B1:"mou", 0xC4B4:"mu", 0xC4C3:"na", 0xC4CA:"nai", 0xC4CF:"nan", 0xC4D2:"nang", 0xC4D3:"nao", 0xC4D8:"ne", 0xC4D9:"nei", 0xC4DB:"nen", 0xC4DC:"neng", 0xC4DD:"ni", 0xC4E8:"nian", 0xC4EF:"niang", 0xC4F1:"niao", 0xC4F3:"nie", 0xC4FA:"nin", 0xC4FB:"ning", 0xC5A3:"niu", 0xC5A7:"nong", 0xC5AB:"nu", 0xC5AE:"nv", 0xC5AF:"nuan", 0xC5B0:"nue", 0xC5B2:"nuo", 0xC5B6:"o", 0xC5B7:"ou", 0xC5BE:"pa", 0xC5C4:"pai", 0xC5CA:"pan", 0xC5D2:"pang", 0xC5D7:"pao", 0xC5DE:"pei", 0xC5E7:"pen", 0xC5E9:"peng", 0xC5F7:"pi", 0xC6AA:"pian", 0xC6AE:"piao", 0xC6B2:"pie", 0xC6B4:"pin", 0xC6B9:"ping", 0xC6C2:"po", 0xC6CB:"pu", 0xC6DA:"qi", 0xC6FE:"qia", 0xC7A3:"qian", 0xC7B9:"qiang", 0xC7C1:"qiao", 0xC7D0:"qie", 0xC7D5:"qin", 0xC7E0:"qing", 0xC7ED:"qiong", 0xC7EF:"qiu", 0xC7F7:"qu", 0xC8A6:"quan", 0xC8B1:"que", 0xC8B9:"qun", 0xC8BB:"ran", 0xC8BF:"rang", 0xC8C4:"rao", 0xC8C7:"re", 0xC8C9:"ren", 0xC8D3:"reng", 0xC8D5:"ri", 0xC8D6:"rong", 0xC8E0:"rou", 0xC8E3:"ru", 0xC8ED:"ruan", 0xC8EF:"rui", 0xC8F2:"run", 0xC8F4:"ruo", 0xC8F6:"sa", 0xC8F9:"sai", 0xC8FD:"san", 0xC9A3:"sang", 0xC9A6:"sao", 0xC9AA:"se", 0xC9AD:"sen", 0xC9AE:"seng", 0xC9AF:"sha", 0xC9B8:"shai", 0xC9BA:"shan", 0xC9CA:"shang", 0xC9D2:"shao", 0xC9DD:"she", 0xC9E9:"shen", 0xC9F9:"sheng", 0xCAA6:"shi", 0xCAD5:"shou", 0xCADF:"shu", 0xCBA2:"shua", 0xCBA4:"shuai", 0xCBA8:"shuan", 0xCBAA:"shuang", 0xCBAD:"shui", 0xCBB1:"shun", 0xCBB5:"shuo", 0xCBB9:"si", 0xCBC9:"song", 0xCBD1:"sou", 0xCBD4:"su", 0xCBE1:"suan", 0xCBE4:"sui", 0xCBEF:"sun", 0xCBF2:"suo", 0xCBFA:"ta", 0xCCA5:"tai", 0xCCAE:"tan", 0xCCC0:"tang", 0xCCCD:"tao", 0xCCD8:"te", 0xCCD9:"teng", 0xCCDD:"ti", 0xCCEC:"tian", 0xCCF4:"tiao", 0xCCF9:"tie", 0xCCFC:"ting", 0xCDA8:"tong", 0xCDB5:"tou", 0xCDB9:"tu", 0xCDC4:"tuan", 0xCDC6:"tui", 0xCDCC:"tun", 0xCDCF:"tuo", 0xCDDA:"wa", 0xCDE1:"wai", 0xCDE3:"wan", 0xCDF4:"wang", 0xCDFE:"wei", 0xCEC1:"wen", 0xCECB:"weng", 0xCECE:"wo", 0xCED7:"wu", 0xCEF4:"xi", 0xCFB9:"xia", 0xCFC6:"xian", 0xCFE0:"xiang", 0xCFF4:"xiao", 0xD0A8:"xie", 0xD0BD:"xin", 0xD0C7:"xing", 0xD0D6:"xiong", 0xD0DD:"xiu", 0xD0E6:"xu", 0xD0F9:"xuan", 0xD1A5:"xue", 0xD1AB:"xun", 0xD1B9:"ya", 0xD1C9:"yan", 0xD1EA:"yang", 0xD1FB:"yao", 0xD2AC:"ye", 0xD2BB:"yi", 0xD2F0:"yin", 0xD3A2:"ying", 0xD3B4:"yo", 0xD3B5:"yong", 0xD3C4:"you", 0xD3D9:"yu", 0xD4A7:"yuan", 0xD4BB:"yue", 0xD4C5:"yun", 0xD4D1:"za", 0xD4D4:"zai", 0xD4DB:"zan", 0xD4DF:"zang", 0xD4E2:"zao", 0xD4F0:"ze", 0xD4F4:"zei", 0xD4F5:"zen", 0xD4F6:"zeng", 0xD4FA:"zha", 0xD5AA:"zhai", 0xD5B0:"zhan", 0xD5C1:"zhang", 0xD5D0:"zhao", 0xD5DA:"zhe", 0xD5E4:"zhen", 0xD5F4:"zheng", 0xD6A5:"zhi", 0xD6D0:"zhong", 0xD6DB:"zhou", 0xD6E9:"zhu", 0xD7A5:"zhua", 0xD7A7:"zhuai", 0xD7A8:"zhuan", 0xD7AE:"zhuang", 0xD7B5:"zhui", 0xD7BB:"zhun", 0xD7BD:"zhuo", 0xD7C8:"zi", 0xD7D7:"zong", 0xD7DE:"zou", 0xD7E2:"zu", 0xD7EA:"zuan", 0xD7EC:"zui", 0xD7F0:"zun", 0xD7F2:"zuo"} 
var spellArray = new Array() 
var pn = "" 
/*for (var i=0xB0A1; i<0xD7FC; i++) 
{ 
if (spell[i]) pn = spell[i] 
execScript("char=chr(\""+i+"\")", "vbscript") 
spellArray[char.charCodeAt(0)] = pn 
}*/ 
function pinyin(char) 
{ 
if (!char.charCodeAt(0) ||char.charCodeAt(0) < 1328) return char; 
if (spellArray[char.charCodeAt(0)]) return spellArray[char.charCodeAt(0)] 
execScript("ascCode=hex(asc(\""+char+"\"))", "vbscript") 
ascCode = eval("0x"+ascCode) 
if (!(ascCode>0xB0A0 && ascCode<0xD7FC)) return char; 
for (var i=ascCode; (!spell[i] && i>0);) i-- 
return spell[i] 
} 
function toPinyin(str) 
{ 
var pStr = "" 
for (var i=0; i<str.length; i++) 
{ 
if (str.charAt(i) == "\n") pStr += "<br>" 
else pStr += "<ruby style='ruby-align:center'> "+str.charAt(i) + " <rt>"+pinyin(str.charAt(i)) + "</rt></ruby>" 
//else pStr += pinyin(str.charAt(i)) + " " 
} 
return pStr 
} 
function toPinyinOnly(str) 
{ 
var pStr = "" 
for (var i=0; i<str.length; i++) 
{ 
if (str.charAt(i) == "\n") pStr += "<br>" 
else pStr += " "+pinyin(str.charAt(i)) ; 
//else pStr += pinyin(str.charAt(i)) + " " 
} 
return pStr 
} 
function toPinyinShengmu(str) 
{ 
var pStr = "" 
for (var i=0; i<str.length; i++) 
{ 
if (str.charAt(i) == "\n") pStr += ""; 
else pStr += pinyin(str.charAt(i)).charAt(0) ; 
//else pStr += pinyin(str.charAt(i)) + " " 
} 
return pStr 
} 
function pinyinSort(a, b) 
{ 
var rValue = 0 
for (var i=0; i<a.length; i++) 
{ 
var pinA = pinyin(a.charAt(i)) 
var pinB = pinyin(b.charAt(i)) 
if (rValue = pinA > pinB ? 1 : pinA < pinB ? -1 : 0) break 
} 
return rValue 
} 
</script> 
<textarea id=kevin cols=100 rows=10>小狗收藏贴</textarea><br> 
<button onclick="test.innerHTML = toPinyin(kevin.innerText)">转换</button> 
<button onclick="test.innerHTML = toPinyinShengmu(kevin.innerText)">转换sm</button> 
<button onclick="test.innerHTML = toPinyinOnly(kevin.innerText)">仅拼音</button> 
<button onclick="test.innerHTML = kevin.innerText.split('').sort(pinyinSort).join('')">排序</button> 
<div id=test style="font-size:16px;"></div> 
select选择,支持中文 
#先选择select,按下键盘字母,option根据所输入字母自动选择匹配的中文,如果要重新选择,按space键盘 
改变option顺序 
<select id="sel" onkeydown="showOptions2(this)" onfocus="inp='';"> 
<option value=1>中国</option> 
<option value=1>北京</option> 
<option value=1>北京1北京</option> 
<option value=1>北京1南京</option> 
<option value=1>北京2</option> 
<option value=1>北京3</option> 
<option value=1>上海</option> 
<option value=1>天津</option> 
<option value=1>天津人口</option> 
<option value=1>人口</option> 
<option value=1>人们</option> 
<option value=1>人民</option> 
</select> 
不改变option顺序 
<select id="sel" onkeydown="showOptions(this)" onfocus="inp='';"> 
<option value=1>中国</option> 
<option value=1>北京</option> 
<option value=1>北京1北京</option> 
<option value=1>北京1南京</option> 
<option value=1>北京2</option> 
<option value=1>北京3</option> 
<option value=1>上海</option> 
<option value=1>天津</option> 
<option value=1>天津人口</option> 
<option value=1>人口</option> 
<option value=1>人们</option> 
<option value=1>人民</option> 
</select> 
<script type='text/javascript'> 
var inp = ""; 
function showOptions(obj){ 
if(event.keyCode==32){ 
inp =""; 
return; 
} 
var tmp = inp; 
tmp += key2code[event.keyCode]?key2code[event.keyCode]:""; 
var someNodeList = obj.getElementsByTagName('option'); 
var index = -1; 
for(var i=0;i<someNodeList.length;i++){ 
var sm = toPinyinShengmu(someNodeList[i].innerHTML); 
if(sm.indexOf(tmp)==0){ 
index = i; 
break; 
} 
} 
if(index>=0){ 
obj.selectedIndex = index; 
inp = tmp; 
} 
} 
function showOptions2(obj){ 
if(event.keyCode==32){ 
inp =""; 
return; 
} 
var tmp = inp; 
tmp += key2code[event.keyCode]?key2code[event.keyCode]:""; 
var someNodeList = obj.getElementsByTagName('option'); 
var index = -1; 
var choose = []; 
for(var i=someNodeList.length-1;i>0;i--){ 
var sm = toPinyinShengmu(someNodeList[i].innerHTML); 
if(sm.indexOf(tmp)==0){ 
inp = tmp; 
choose[choose.length] = someNodeList[i]; 
obj.removeChild(someNodeList[i]); 
} 
} 
if(choose.length>0){ 
someNodeList = obj.getElementsByTagName('option'); 
var len = someNodeList.length; 
for(var i=0;i<len;i++){ 
choose[choose.length] = someNodeList[i]; 
} 
for(var i=0;i<choose.length;i++){ 
obj.appendChild(choose[i]); 
} 
obj.selectedIndex = 0; 
} 
someNodeList = null; 
choose = null; 
} 
</script>
Javascript 相关文章推荐
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
js select实现省市区联动选择
Apr 17 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
Vue 打包体积优化方案小结
May 20 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
jquery ajax 登录验证实现代码
Sep 23 #Javascript
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 #Javascript
javascript 必知必会之closure
Sep 21 #Javascript
用JavaScript隐藏控件的方法
Sep 21 #Javascript
jquery 子窗口操作父窗口的代码
Sep 21 #Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 #Javascript
用jQuery技术实现Tab页界面之二
Sep 21 #Javascript
You might like
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
PHP多例模式介绍
2013/06/24 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
php中动态变量用法实例
2015/06/10 PHP
php上传大文件设置方法
2016/04/14 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现的计数排序算法示例
2017/11/29 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
教师个人剖析材料
2014/02/05 职场文书
2014年教师节寄语
2014/04/03 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python