html select选择下拉框控件 键盘输入索引的实现

标题太难取了,汗 ^^
主要是这样,看截图:

看html代码:

<select name='sheng' onchange='JavaScript:areas_load(this.value);'><option value='0'>请选择省份</option><option value='13'>A - 安徽</option><option value='33'>A - 澳门</option><option value='1'>B - 北京</option><option value='4'>C - 重庆</option><option value='14'>F - 福建</option><option value='21'>G - 广西</option><option value='20'>G - 广东</option><option value='28'>G - 甘肃</option><option value='24'>G - 贵州</option><option value='22'>H - 海南</option><option value='18'>H - 湖北</option><option value='17'>H - 河南</option><option value='19'>H - 湖南</option><option value='5'>H - 河北</option><option value='10'>H - 黑龙江</option><option value='15'>J - 江西</option><option value='11'>J - 江苏</option><option value='9'>J - 吉林</option><option value='8'>L - 辽宁</option><option value='30'>N - 宁夏</option><option value='7'>N - 内蒙古</option><option value='29'>Q - 青海</option><option value='6'>S - 山西</option><option value='23'>S - 四川</option><option value='2'>S - 上海</option><option value='16'>S - 山东</option><option value='27'>S - 陕西</option><option value='3'>T - 天津</option><option value='34'>T - 台湾</option><option value='26'>X - 西藏</option><option value='31'>X - 新疆</option><option value='32'>X - 香港</option><option value='25'>Y - 云南</option><option value='12'>Z - 浙江</option></select><SELECT NAME="shi" id="shi" onchange="JavaScript:area_load(this.value);"><option value=''>请选择地级市</option></SELECT>

注意option的text里带有字母了已经,这样输入对应的字母就可以锁定到option了.这是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:"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>东城区</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>东城区</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> 

评论

1 楼 wsg11 2012-02-14  

头像太漂亮了
！！！！！