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如何判断某元素是否具备指定的样式
Nov 05 Javascript
js 通用订单代码
Dec 23 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
AngularJs 常用的过滤器
May 15 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
jQuery实现增删改查
Dec 22 jQuery
前端JavaScript大管家 package.json
Nov 02 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
关于IIS php调用com组件的权限问题
2012/01/11 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
JavaScript版代码高亮
2006/06/26 Javascript
Javascript 遍历对象中的子对象
2009/07/03 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
Python中的高级函数map/reduce使用实例
2015/04/13 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
详解python 注释、变量、类型
2018/08/10 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
python脚本第一行如何写
2020/08/30 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
个人简历自我评价
2014/02/02 职场文书
20年同学聚会感言
2014/02/03 职场文书
关于安全的广播稿
2014/10/23 职场文书
Python正则表达式中flags参数的实例详解
2022/04/01 Python