javascript实现通过拼音首字母快速选择下拉列表

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉列表快速选择</title>

<script type="text/javascript" language="JavaScript">
// 获取拼音首字母
function getPinYin(c) {
    execScript("tmp=asc(\""+c+"\")", "vbscript");
    tmp = 65536 + tmp;
    if(tmp>=45217 && tmp<=45252) return "A";
    if(tmp>=45253 && tmp<=45760) return "B";
    if(tmp>=45761 && tmp<=46317) return "C";
    if(tmp>=46318 && tmp<=46825) return "D";
    if(tmp>=46826 && tmp<=47009) return "E";
    if(tmp>=47010 && tmp<=47296) return "F";
    if((tmp>=47297 && tmp<=47613) || (tmp == 63193)) return "G";
    if(tmp>=47614 && tmp<=48118) return "H";
    if(tmp>=48119 && tmp<=49061) return "J";
    if(tmp>=49062 && tmp<=49323) return "K";
    if(tmp>=49324 && tmp<=49895) return "L";
    if(tmp>=49896 && tmp<=50370) return "M";
    if(tmp>=50371 && tmp<=50613) return "N";
    if(tmp>=50614 && tmp<=50621) return "O";
    if(tmp>=50622 && tmp<=50905) return "P";
    if(tmp>=50906 && tmp<=51386) return "Q";
    if(tmp>=51387 && tmp<=51445) return "R";
    if(tmp>=51446 && tmp<=52217) return "S";
    if(tmp>=52218 && tmp<=52697) return "T";
    if(tmp>=52698 && tmp<=52979) return "W";
    if(tmp>=52980 && tmp<=53688) return "X";
    if(tmp>=53689 && tmp<=54480) return "Y";
    if(tmp>=54481 && tmp<=62289) return "Z";
    return c.charAt(0);
}

// select helper
SelectHelper = new function() {
// 初始化
this.init = function() {
document.attachEvent("onkeypress", function() {
var elm = event.srcElement;
if (elm.tagName == "SELECT"
&& elm.className.indexOf("SelectHelper") == -1) {
elm.className += "SelectHelper";
elm.attachEvent("onkeypress", SelectHelper.getNextKeyItem);
elm.fireEvent("onkeypress", event);
}
});
}
// 获取选项文本的首字符
function getItemKeyChar(option) {
return option.text.charAt(0).toUpperCase();
}
// 查找并选中匹配的选项
this.getNextKeyItem = function() {
var elm = event.srcElement;
var index = elm.selectedIndex + 1;
do {
if (index == elm.length) index = 0;
if (index == elm.selectedIndex) return false; // 未找到匹配的选项，则退出
} while (key2Char(event.keyCode) != getPinYin(getItemKeyChar(elm.options[index++])));
elm.selectedIndex = index - 1; // 选中匹配的选项
return false; // 取消原有的选择功能
}
};
/**
* 返回键盘事件对应的字母或数字
* a-z: 97 -> 122
* A-Z: 65 -> 90
* 0-9: 48 -> 57
*/
function key2Char(key) {
var s = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
if (key >= 97 && key <= 122) return s.charAt(key - 97);
if (key >= 65 && key <= 90) return s.charAt(key - 65);
if (key >= 48 && key <= 57) return "" + (key - 48);
return null;
}
SelectHelper.init();
</script>
</head>
<body>
比如，某选项的拼音首字母为"a",只要按下键盘上的"a"，就可以快速选择该项。<br />
<select>
<OPTION selected value=北京>北京</OPTION>
<OPTION value=上海>上海</OPTION>
<OPTION value=天津>天津</OPTION>
<OPTION value=重庆>重庆</OPTION>
<OPTION value=河北>河北</OPTION>
<OPTION value=山西>山西</OPTION>
<OPTION value=内蒙古>内蒙古</OPTION>
<OPTION value=辽宁>辽宁</OPTION>
<OPTION value=32>32</OPTION>
<OPTION value=吉林>吉林</OPTION>
<OPTION value=黑龙江>黑龙江</OPTION>
<OPTION value=江苏>江苏</OPTION>
<OPTION value=浙江>浙江</OPTION>
<OPTION value=%&>&^</OPTION>
<OPTION value=安徽>安徽</OPTION>
<OPTION value=福建>福建</OPTION>
<OPTION value=北京>A1</OPTION>
<OPTION value=江西>江西</OPTION>
<OPTION value=山东>山东</OPTION>
<OPTION value=河南>河南</OPTION>
<OPTION value=湖北>湖北</OPTION>
<OPTION value=湖南>湖南</OPTION>
<OPTION value=31>31</OPTION>
<OPTION value=广东>广东</OPTION>
<OPTION value=广西>广西</OPTION>
<OPTION value=海南>海南</OPTION>
<OPTION value=北京>A2</OPTION>
<OPTION value=四川>四川</OPTION>
<OPTION value=贵州>贵州</OPTION>
<OPTION value=云南>云南</OPTION>
<OPTION value=西藏>西藏</OPTION>
<OPTION value=陕西>陕西</OPTION>
<OPTION value=甘肃>甘肃</OPTION>
<OPTION value=宁夏>宁夏</OPTION>
<OPTION value=青海>青海</OPTION>
<OPTION value=新疆>新疆</OPTION>
<OPTION value=香港>香港</OPTION>
<OPTION value=澳门>澳门</OPTION>
<OPTION value=台湾>台湾</OPTION>
<OPTION value=其它>其它</OPTION>
</SELECT>
<select>
<OPTION selected value=北京>北京</OPTION>
<OPTION value=上海>上海</OPTION>
<OPTION value=天津>天津</OPTION>
<OPTION value=重庆>重庆</OPTION>
<OPTION value=河北>河北</OPTION>
<OPTION value=山西>山西</OPTION>
<OPTION value=内蒙古>内蒙古</OPTION>
<OPTION value=辽宁>辽宁</OPTION>
<OPTION value=32>32</OPTION>
<OPTION value=吉林>吉林</OPTION>
<OPTION value=黑龙江>黑龙江</OPTION>
<OPTION value=江苏>江苏</OPTION>
<OPTION value=浙江>浙江</OPTION>
<OPTION value=%&>&^</OPTION>
<OPTION value=安徽>安徽</OPTION>
<OPTION value=福建>福建</OPTION>
<OPTION value=北京>A1</OPTION>
<OPTION value=江西>江西</OPTION>
<OPTION value=山东>山东</OPTION>
<OPTION value=河南>河南</OPTION>
<OPTION value=湖北>湖北</OPTION>
<OPTION value=湖南>湖南</OPTION>
<OPTION value=31>31</OPTION>
<OPTION value=广东>广东</OPTION>
<OPTION value=广西>广西</OPTION>
<OPTION value=海南>海南</OPTION>
<OPTION value=北京>A2</OPTION>
<OPTION value=四川>四川</OPTION>
<OPTION value=贵州>贵州</OPTION>
<OPTION value=云南>云南</OPTION>
<OPTION value=西藏>西藏</OPTION>
<OPTION value=陕西>陕西</OPTION>
<OPTION value=甘肃>甘肃</OPTION>
<OPTION value=宁夏>宁夏</OPTION>
<OPTION value=青海>青海</OPTION>
<OPTION value=新疆>新疆</OPTION>
<OPTION value=香港>香港</OPTION>
<OPTION value=澳门>澳门</OPTION>
<OPTION value=台湾>台湾</OPTION>
<OPTION value=其它>其它</OPTION>
</SELECT>
</body>
</html>


下拉列表快速选择// 获取拼音首字母function getPinYin(c) { execScript("tmp=asc(\""+c+"\")", "vbscript"); tmp = 65536 + tmp; if(tmp>=45217 && tmp=45253 && tmp=45761 && tmp=46318 && tmp=46826 && tmp=47010 && tmp=47297 && tmp=47614 && tmp=48119 && tmp=49062 && tmp=49324 && tmp=49896 && tmp=50371 && tmp=50614 && tmp=50622 && tmp=50906 && tmp=51387 && tmp=51446 && tmp=52218 && tmp=52698 && tmp=52980 && tmp=53689 && tmp=54481 && tmp 122 * A-Z: 65 -> 90 * 0-9: 48 -> 57 */function key2Char(key) { var s = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; if (key >= 97 && key = 65 && key = 48 && key 比如，某选项的拼音首字母为"a",只要按下键盘上的"a"，就可以快速选择该项。
北京上海天津重庆河北山西内蒙古辽宁32吉林黑龙江江苏浙江&^安徽福建A1江西山东河南湖北湖南31广东广西海南A2四川贵州云南西藏陕西甘肃宁夏青海新疆香港澳门台湾其它北京上海天津重庆河北山西内蒙古辽宁32吉林黑龙江江苏浙江&^安徽福建A1江西山东河南湖北湖南31广东广西海南A2四川贵州云南西藏陕西甘肃宁夏青海新疆香港澳门台湾其它

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • js汉字转拼音实现代码

    js汉字转拼音实现代码

    代码下载:复制以下代码到PinYin.js即可.调用方法: var pinyin = codefans_net_CC2PY("你好吗");PinYin.js 复制代码 代码如下: var PinYin = {"a":"\u554a\u963f\u9515","ai":"\u57c3\u6328\u54ce\u5509\u54c0\u7691\u764c\u853c\u77ee\u827e\u788d\u7231\u9

  • javascript汉字转拼音的代码

    var strGB="啊阿埃挨哎唉哀皑癌蔼矮艾碍爱隘鞍氨安俺按暗岸胺案肮昂盎凹敖熬翱袄傲奥懊澳芭捌扒叭吧笆八疤巴拔跋靶把耙坝霸罢爸白柏百摆佰败拜稗斑班搬扳般颁板版扮拌伴瓣半办绊邦帮梆榜膀绑棒磅蚌镑傍谤苞胞包褒剥薄雹保堡饱宝抱报暴豹鲍爆杯碑悲卑北辈背贝钡倍狈备惫焙被奔苯本笨崩绷甭泵蹦迸逼鼻比鄙笔彼碧蓖蔽毕毙毖币庇痹闭敝弊必辟壁臂避陛鞭边编贬扁便变卞辨辩辫遍标彪膘表鳖憋别瘪彬斌濒滨宾摈兵冰柄丙秉饼炳病并玻菠播拨钵波博勃搏铂箔伯帛舶脖膊渤泊驳捕卜哺补埠不布步簿部怖擦猜裁材才财睬踩采彩菜蔡餐参蚕残惭惨灿

  • 用正则表达式判断字符串是汉字还是拼音的js函数代码

    复制代码 代码如下: function checkFormat(str) { if (escape(str).indexOf("%u")!=-1) alert("不能含有汉字"); else if(str.match(/\D/)!=null) { alert('不能含有字母'); } }

  • javascript 汉字与拼音转换

    var spell = {0xB0A1:"a", 0xB0A3:"ai", 0xB0B0:"an", 0xB0B9:"ang", 0xB0BC:"ao", 0xB0C5:"ba", 0xB0D7:"bai", 0xB0DF:"ban", 0xB0EE:"bang", 0xB0FA:"bao", 0xB1AD:

  • 基于jQuery.Hz2Py.js插件实现的汉字转拼音特效

    可以实现基于jQuery实现汉字转换成拼音代码.这是一款基于jQuery.Hz2Py.js插件实现的汉字转拼音特效.插件自行下载.使用方法如下(注意修改jq的引入路径). <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>基于jQuery实现汉字转换成拼音代码</title> <

  • javascript实现根据汉字获取简拼

    主要用于模糊查询,或者快速查找 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --&g

  • javascript 汉字转拼音实现代码

    汉字转拼音演示代码 javascript 汉字转拼音 //作者:塗聚文, //還有繁體字,可以自己加上 //根據網上修改:http://www.dusystem.com,www.dupcit.com var pinyin={ mfkdb:[ ['A','阿吖嗄腌锕'], ['Ai','埃挨哎唉哀皑癌蔼矮艾碍爱隘捱嗳嗌嫒瑷暧砹锿霭'], ['An','鞍氨安俺按暗岸胺案谙埯揞庵桉铵鹌黯'], ['Ang','肮昂盎'], ['Ao','凹敖熬翱袄傲奥懊澳坳嗷岙廒遨媪骜獒聱螯鏊鳌鏖'], ['Ba'

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

    复制代码 代码如下: <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:"

  • JavaScript实现拼音排序的方法

    一般情况下,大家会使用下面的方法来进行汉字的拼音排序 复制代码 代码如下: var list = [ '王', '张','李']; list.sort(function (a, b) { return a.localeCompare(b); }); localeCompare() :用本地特定的顺序来比较两个字符串. 通过localeCompare这个方法来进行拼音排序的不可靠之处在于: 1. 很依赖中文操作系统 2. 很依赖浏览器的内核 也就是说,如果你的网站访问者是通过非中文系统,或者非IE

  • js仿淘宝的拼音检索特效代码

    以下是HTML网页特效代码,点击运行按钮可查看效果 js仿taobao效果 *{ margin:0;padding:0;} body{ font:normal 12px Verdana, Arial, Helvetica, sans-serif; text- align:center;} #warpper{ position:absolute; left:100px; top:100px;} h5{ float:left;} a{ text-decoration:underline; curso

随机推荐