Js obtains the Chinese pinyin, and Select automatically matches the code of the letter to get the value

Copy codeThe Code is as follows:
<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", 0 xBABB: "hang", 0 xBABE: "hao", 0xBAC7: "he", 0xBAD9: "hei", 0 xBADB: "yellow", 0 xBADF: "heng", 0xBAE4: "hong", 0 xBAED: "hou", 0xBAF4: "hu", 0xBBA8: "hua", 0xBBB1: "huai", 0xBBB6: "huan", 0xBBC4: "huang", 0xBBD2: "hui ", 0xBBE7: "hun", 0 xBBED: "huo", 0xBBF7: "ji", 0 xBCCE: "jia", 0 xBCDF: "jian", 0xBDA9: "jiang ", 0xBDB6: "jiao", 0xBDD2: "jie", 0 xBDED: "jin", 0xBEA3: "jing", 0 xBEBC: "jiong", 0 xBEBE: "jiu ", 0 xBECF: "ju", 0xBEE8: "juan", 0 xBEEF: "jue", 0xBEF9: "jun", 0xBFA6: "ka", 0 xBFAA: "kai ", 0 xBFAF: "kan", 0xBFB5: "kang", 0 xBFBC: "kao", 0xBFC0: "ke", 0 xBFCF: "ken", 0xBFD3: "keng ", 0xBFD5: "kong", 0xBFD9: "kou", 0 xBFDD: "ku", 0xBFE4: "kua", 0xBFE9: "kuai", 0 xBFED: "kuan ", 0 xBFEF: "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", 0 xCADF: "shu", 0xCBA2: "shua", 0xCBA4: "shuai", 0xCBA8: "shuan", 0 xCBAA: "shuang", 0 xCBAD: "shui", 0xCBB1: "shun", 0xCBB5: "shuo", 0xCBB9: "si", 0xCBC9: "song", 0xCBD1: "sou", 0xCBD4: "su", 0xCBE1: "suan", 0xCBE4: "sui ", 0 xCBEF: "sun", 0xCBF2: "suo", 0 xCBFA: "ta", 0xCCA5: "tai", 0 xCCAE: "tan", 0xCCC0: "tang ", 0 xCCCD: "tao", 0xCCD8: "te", 0xCCD9: "teng", 0 xCCDD: "ti", 0 xCCEC: "tian", 0xCCF4: "tiao ", 0xCCF9: "tie", 0 xCCFC: "ting", 0xCDA8: "tong", 0xCDB5: "tou", 0xCDB9: "tu", 0xCDC4: "tuan", 0xCDC6: "tui", 0 xCDCC: "tun", 0 xCDCF: "tuo", 0 xCDDA: "wa", 0xCDE1: "wai", 0xCDE3: "wan", 0xCDF4: "wang", 0 xCDFE: "wei", 0xCEC1: "wen", 0 xCECB: "weng", 0 xCECE: "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> dog favorites </textarea> <br>
<Button onclick = "test. innerHTML = toPinyin (kevin. innerText)"> conversion </button>
<Button onclick = "test. innerHTML = toPinyinShengmu (kevin. innerText)"> sm conversion </button>
<Button onclick = "test. innerHTML = toPinyinOnly (kevin. innerText)"> pinyin only </button>
<Button onclick = "test. innerHTML = kevin. innerText. split (''). sort (pinyinSort). join ('')"> sort </button>
<Div id = test style = "font-size: 16px;"> </div>
Select, supports Chinese
# Select first, press the keyboard letters, and option automatically selects the matching Chinese Characters Based on the entered letters. If you want to re-select, press the space keyboard
Change option order
<Select id = "sel" onkeydown = "showOptions2 (this)" onfocus = "Indium =''; ">
<Option value = 1> China </option>
<Option value = 1> Beijing </option>
<Option value = 1> Beijing 1 Beijing </option>
<Option value = 1> Beijing 1 Nanjing </option>
<Option value = 1> Beijing 2 </option>
<Option value = 1> Beijing 3 </option>
<Option value = 1> Shanghai </option>
<Option value = 1> Tianjin </option>
<Option value = 1> Population of Tianjin </option>
<Option value = 1> Population </option>
<Option value = 1> People </option>
<Option value = 1> People </option>
</Select>
Option sequence unchanged
<Select id = "sel" onkeydown = "showOptions (this)" onfocus = "Indium =''; ">
<Option value = 1> China </option>
<Option value = 1> Beijing </option>
<Option value = 1> Beijing 1 Beijing </option>
<Option value = 1> Beijing 1 Nanjing </option>
<Option value = 1> Beijing 2 </option>
<Option value = 1> Beijing 3 </option>
<Option value = 1> Shanghai </option>
<Option value = 1> Tianjin </option>
<Option value = 1> Population of Tianjin </option>
<Option value = 1> Population </option>
<Option value = 1> People </option>
<Option value = 1> People </option>
</Select>
<Script type = 'text/javascript '>
Var indium = "";
Function showOptions (obj ){
If (event. keyCode = 32 ){
Indium = "";
Return;
}
Var tmp = indium;
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;
Indium = tmp;
}
}
Function showOptions2 (obj ){
If (event. keyCode = 32 ){
Indium = "";
Return;
}
Var tmp = indium;
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 ){
Indium = 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>