Recentemente, encontrei um problema de JS no IE8. Preciso implementar (IE8) para usar o Pinyin ou as primeiras letras para recuperar o conteúdo em seleção. O ComboBox original só poderia suportar a entrada e a pesquisa de caracteres chineses, e agora preciso melhorá -lo. Agora vou registrar o método de implementação passo a passo. A função é simples e pode haver bugs e deficiências para referência de aprendizado. (Este artigo fornece apenas aprendizado de ideias e backup. Na situação real, ele precisa ser usado no modo de compatibilidade do IE8 ou IE, para que outros navegadores não sejam levados em consideração)
Estrutura do diretório:
teste
| --js
| --index.html
Adicionar na página de índice
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/autoComplete.js" ></script> <script type="text/javascript"> </script> </head> <body> <input type="text" id = "txtDisplay"/> <select id = "city"> <opção value = "1"> beijing </pption> <opção value = "2"> shanghai </pption> <opção value = "3"> option> option </option> </option> <pution value = "4"> shenzhen </option> <pution> value = "5"> 5 "> chong> <phot> <pption>" 4 "> shenzhen </option> <pution>" 6 "> 5"> 5 ">"> "> opção </option> option> option> option> option> option> </option> option> option> </option> option </option> </option </option> </option </option> 5"> chong> <tpption> <pption) <opção value = "7"> shenyang </pption> <option value = "8"> nanjing </pption> <opção value = "9"> wuhan </pption> <opção value = "10"> changchun </option> <opção "" 11 "> chengdu </option> <pution>"> 12 "> <///" value="14">Qingdao</option> <option value="15">aJinan</option> <option value="16">Xiamen</option> <option value="17">Fuzhou</option>> <option value="18">Xi'an</option> <option value="19">Changsha</option> <option value="20">Harbin</option> </select> </body> </html>
Efeito: comece a esconder a caixa de lista suspensa de seleção. Ao clicar na caixa de texto de entrada, exiba -a na parte inferior da caixa de entrada. Após a conclusão da seleção, oculte a seleção.
Implementação do JS:
Se uma página tiver vários lugares para implementar essas funções, você precisará usar o pensamento orientado a objetos e reutilizar o código o máximo possível. Precisamos personalizar uma coleção como o AP.
AutoComplete.js
Função mapa () { / ** Array para armazenar as teclas (usadas para traversal)* / this.keys = new Array (); / ** Dados de armazenamento*/ this.data = new Object (); / ** * Coloque um par de valores-chave * @param {string} key * @param {object} value */ this.put = function (key, value) {if (this.data [key] == null) {this.keys.push (key); } this.data [key] = value; }; / ** * Obtenha o valor correspondente a uma chave * @param {string} key * @return {object} value */ this.get = function (key) {return this.data [key]; }; / *** Exclua um par de valores-chave* @param {string} key*/ this.remove = function (key) {this.keys.remove (key); this.data [key] = null; }; / ** * Atravessando o mapa e executando a função de processamento * * @param {function} função de retorno de chamada (chave, value, index) {..} */ this.each = function (fn) {if (typeof fn! = 'Function') {return; } var len = this.keys.length; for (var i = 0; i <len; i ++) {var k = this.keys [i]; fn (k, this.data [k], i); }}; / *** Obtenha uma matriz de valores-chave (semelhante ao Java's EntrySet ())* @return Matriz do objeto de valor-chave {key, value}*/ this.entrys = function () {var len = this.keys.length; Var Entrys = New Array (LEN); for (var i = 0; i <len; i ++) {entradas [i] = {chave: this.keys [i], valor: this.data [i]}; } retornar entradas; }; / *** Determine se o mapa está vazio*/ this.isempty = function () {return this.keys.length == 0; }; / *** Obtenha o número de pares de valor-chave*/ this.size = function () {return this.keys.length; }; / ** * Reescreva a tostring */ this.toString = function () {var s = "{"; for (var i = 0; i <this.keys.length; i ++, s+= ',') {var k = this.keys [i]; s+= k+"="+this.data [k]; } s+= "}"; retorno s; }; } Array.prototype.remove = função (s) {for (var i = 0; i <this.length; i ++) {if (s == this [i]) this.splice (i, 1); }}Agora, precisamos escrever um arquivo de entrada de carregamento de programa, usado para passar a entrada e selecionar objetos e, em seguida, executar uma série de operações como a ligação de eventos.
var autocompletemap = novo map (); // contêiner de componentes, que é conveniente para chamar quando acionado por evento de componente, e suporta gerenciamento de vários componentes var splitfleg = "_"; // Separator/*** Caixa de texto, a caixa suspensa é combinada em um componente de conclusão automática* @param {objeto} txtObj Text Box Object* @param {object} SelectOBJ Objeto suspenso da caixa* @param {int} SelectSize Exibir o número de caixas suspensas* @PARAM {int} {SelectLuct Length-Do-Down de LengthE-Down*/FUNÇÃO DESLUTETOLETOLETEMETELETETELETEMETELETEMETELETEMETELETEMETELETEMETELETEMETELETEMETELETEMETELETEMET-DowneTelt} selectLength) {this.cachecontainer = new Array (); // Contêiner de cache, usado para cache o conteúdo na opção de cacheContainer quando a página é carregada. This.init = function () {this.initcache (); // Dados de cache, cache os dados da opção para armazenar em cacheContainer this.initcss (); // Inicialize CSS e oculte selecione este.RegisteRevent (); // Evento de registro this.setSelectIdPosition (); // Defina a localização do componente de corrente de cache Select // para facilitar a chamada quando acionada por eventos do componente. Ao mesmo tempo, ele suporta gerenciamento de componentes multi-componentes automatizap.put (txtobj.id + selectObj.id, este); // Depois que a interface estiver atualizada, escreva o valor do texto da caixa suspensa da agência direta na caixa de texto var selectIndex = selectObj.SelectedIndex; se (selectIndex> 0) // O primeiro conteúdo geralmente for [selecione]. Caso contrário, altere> 0 para> = 0 txtObj.value = selectObj.Options [selectIndex] .Text; } // Dados de cache e cache Dados da opção para CacheContainer this.initcache = function () {var select_Options = selectObj.Options; if (select_options == null || select_options.Length == 0) {return; } this.cachecontainer = []; for (var i = 0; i <select_options.Length; i ++) {this.cachecontainer [i] = select_options [i] .text + splitfleg + select_options [i] .Value; }} this.initcss = function () {selectObj.style.display = "nenhum"; selectObj.style.Position = "Absolute"; selectObj.style.zindex = 2; selectObj.style.width = selectLength + "px"; selectObj.multiple = "múltiplo"; txtobj.style.width = selectLength - 5 + "px"; } this.registerEvent = function () {// Evento suspenso SelectObj.ondblClick = this.doubleclickevent; selectObj.onKeyUp = this.Keypevent; selectObj.onBlur = this.onBlurevent; selectObj.onfocus = this.onfocusevent; // Evento da caixa de texto TXTOBJ.onfocus = this.onfocusevent; txtobj.onblur = this.onblurevent; txtobj.onkeyup = this.txtobjkeyupevent; } this. selectObj.style.left = posição [0] + "px"; selectObj.style.top = posição [3] + 3 + "px"; } this.findPosition = function (oElement) {var x2 = 0; var y2 = 0; var largura = oElement.OffSetWidth; altura var = oElement.OffSetHeight; if (typeof (oElement.OffSetParent)! = 'indefinido') {for (var posx = 0, posy = 0; oElement; oElement = oElement.OffSetParent) {posx += oElement.OffSetLeft; posy += oelement.offsettop; } x2 = Posx + largura; y2 = posy + altura; retornar [Posx, Posy, x2, y2]; } else {x2 = oelement.x + width; y2 = oElement.y + altura; return [oelement.x, oelement.y, x2, y2]; }} // --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ = AutoCompletemap.get (txtobj.id + selectObj.id); if (event.KeyCode == 13) {event.returnValue = false; var srcem = document.activeElement; // Obtenha o objeto atualmente focado var testVal = srcem.id; if (testVal == selectObj.id) {autocomplete.doubleleclickevent (); }}} / *** Evento de foco* / this.onBlurevent = function () {var srcem = document.activeElement; var testVal = srcem.id; if (testVal! = selectObj.id && testVal! = txtObj.id) {// se a caixa de entrada atual ou a lista de selecionar não estiver focada, selectObj.style.display = "nenhum"; // Ocultar a lista de selecionar}}/*** Evento de foco*/this.onfocusevent = function () {var autocomplete = autoCompletemap.get (txtobj.id + selectObj.id); AutoComplete.seStelectIdPosition (); var srcem = document.activeElement; var testVal = srcem.id; if (testval == selectObj.id || testVal == txtObj.id) {// Concentre -se no objeto atual se (txtobj.value.length! = 0) {// Quando houver caracteres na caixa de entrada, nenhuma operação é executada; } var selectIdLength = selectObj.options.length; if (selectIdLength> selectSize) {selectObj.size = selectSize; } else {selectObj.size = selectIdLength; } selectObj.style.display = "bloco"; }} var myTimeout = null; / ** * O mouse da caixa de texto se concentra no evento de liberação, defina um temporizador, execute a função a cada horário específico, consulte os dados de seleção correspondentes correspondentes na caixa de entrada e exibir */ this.txtobjkeyupevent = function () {var autocomplete = auto -interceppletemap.get (txtobj.id + selectObj.id); if (event.KeyCode == 40) {// Clique na tecla de seta do teclado na caixa de entrada e não há necessidade de pesquisar neste momento. O evento de pesquisa é acionado quando a entrada var srcem = document.activeElement; var testVal = srcem.id; if (testval == txtobj.id) {selectObj.focus (); if (selectObj.Options.Length> = 1) SelectObj.Options [0] .Selected = true; } retornar; } if (autocomplete.mytimeout! = null) {// limpe o conjunto de execução cronometrado ClearTimeout (autocomplete.mytimeout); } autoComplete.mytimeout = setTimeout (AutoComplete.doajax, 200); } // ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- {var automocomplete = autocompletemap.get (txtobj.id + selectObj.id); // limpe as opções originais automatizadas.clearalloptions (); AutoComplete.seStelectIdPosition (); var inputStr = txtObj.value; var Arrays = AutoComplete.comPareInput (InputStr); // corresponde a dados que atendem às condições da consulta se (Arrays == null || Arrays.Length == 0) {selectObj.style.display = "nenhum"; retornar; } selectObj.style.display = "bloco"; for (var i = 0; i <Arrays.Length; i ++) {var optionParams = matrizes [i] .split (splitfleg); var opt = nova opção (); opt.text = optionParams [0]; opt.value = optionParams [1]; selectObj.add (OPT); } if (Arrays.Length> SelectSize) {selectObj.size = selectSize; } else {selectObj.size = Arrays.length; }} / ** * Limpe as opções originais * / this.clearalloptions = function () {// limpe as opções originais var nl = selectObj.Options.Length; while (nl> 0) {selectObj.remove (selectObj.options.length - 1); nl = selectObj.Options.Length; }} // ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- this.comPareInput = function (inputStr) {if (this.cachecontainer.length == 0) {return; } inputStr = inputStr.replace (/(^[/s]*)/g, ""); // Remova a string em branco na entrada frontal inputStr = this.deleletSpecialSpace (inputStr); // Remova a sequência em branco especial if (inputStr == null || inputStr.length == 0) {return this.cachecontainer; } inputStr = desablesecialcharacter (inputStr); // Processamento de caracteres especial var resultArray = new Array (); var k = 0; var selectText = ""; para (var i = 0; i <this.cachecontainer.length; i ++) {selectText = (this.cachecontainer [i] .split (splitfleg) [0]). substituir (/(^[/s]*)/g, ""); selectText = this.deleletSpecialSpace (selectText); if (comparerules (inputStr, selectText)) {// corresponde a regra resultArray [k] = this.cachecontainer [i]; k ++; }} retornar uniquearray (resultado); } / *** Remova string em branco especial* / this.deleletSpecialSpace = function (srcstr) {var temp = ""; for (var i = 0; i <srcstr.length; i ++) {var charstr = srcstr.charat (i); // Espaço especial na interface unicode = 160, este espaço não é de largura total nem largura se (Charstr.Charcodeat (0) == 160) {continue; } temp += charstr; } retornar temp; }}/*** @param {string} caracteres de entrada de entrada que precisam ser filtrados* Processamento especial de caracteres*/função desablesepecialcharacter (inputStr) {inputStr = inputStr.replace (new regexp ("////", 'g'), "/////"); inputStr = inputStr.replace (novo regexp ("//.", 'g'), "//."); inputStr = inputStr.replace (novo regexp ("//^", 'g'), "//^"); inputStr = inputStr.replace (novo regexp ("// {", 'g'), "// {"); inputStr = inputStr.replace (novo regexp ("// [", 'g'), "// ["); inputStr = inputStr.replace (novo regexp ("// (", 'g'), "// ("); inputStr = inputStr.replace (new regexp ("// |", 'g'), "// |"); inputstr = inputst.replace (new regexp ("//] Regexp ("//]", 'g'), "//]"); inputStr = inputStr.replace (novo regexp ("//*", 'g'), "//*"); inputStr = inputStr.replace (novo regexp ("//+", 'g'), "//+"); inputStr = inputStr.replace (novo regexp ("//?", 'g'), "//?"); retornar inputStr; } /*** Regras de correspondência* @param {String} CARACTERIÇÃO DE INPUTRANTS DE INPUTSTR, corresponda à condição* @param {string} selectText é correspondido com o texto* /função comparaRules (inputStr, selectText) {// corresponde aos caracteres chineses retornar selectText.indexOf (inputStr)! = -1; } / *** Filtrar dados duplicados* @param {object} Arr Array de resultado* / função uniquearray (arr) {if (arr == null || arr.length == 0) {return arr; } retornar arr.versever (). junção (","). Match (/([^ ,+)(?! } / *** Adicione a função personalizada para executar no OnLoad original* @param {objeto} função de carregamento de funces* / função addloadevent (func) {var OldOnLload = window.onload; if (typeof window.onload! = 'function') {window.onload = func; } else {window.onload = function () {OldonLoad (); func (); }}}}Apresentando a ferramenta JS para converter caracteres chineses em pinyin
Pinyinhanzi.JS
/** * Man conversion to pinyin tool js */ 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"}; 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: " "bo", 0xb2b8: "bu", 0xb2c1: "ca", 0xb2c2: "cai", 0xb2cd: "can", 0xb2d4: "cang", 0xb2d9: "cao", 0xb2De: "ce", 0xb2e3: cenn: "cen", 0xb2de: "ce", 0xb2e3: cenn: "ceng", 0xb2De: "ce", 0xb2e3: cenn: ceng ", 0xb2d4: 0xb2d9:" cen ", 0xB2DE:" ce ", 0xb2e3: ceng", 0xB2De: "ce: 0xb2e3: ceng", "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", 0xb4c1: " 0xb4d6: "cu", 0xb4da: "cuan", 0xb4dd: "cui", 0xb4e5: "cun", 0xb4e8: "cuo", 0xb4ee: "da", 0xb4f4: "dai", 0xb5a2: "" 0x ", 0xb4f4:" dai ", 0xb5a2:" "0x", 0xb5c2: "de", 0xb5c5: "Deng", 0xb5cc: "di", 0xb5df: "Dian", 0xb5ef: "diao", 0xb5f8: "die", 0xb6a1: "ding", 0xb6aaaaaaaaaa: "diu", 0xb6a1: "ding", 0xb6aaaaaaaaaaa: 0xb6bc: "du", 0xb6cb: "duan", 0xb6d1: "DUI", 0xb6d5: "dun", 0xb6de: "duo", 0xb6ea: "e", 0xb6f7: "enxb6f8:" Er ", 0xB7, 0xb7bb: "fang", 0xb7c6: "fei", 0xb7d2: "fen", 0xb7e1: "feng", 0xb7f0: "fo", 0xb7f1: "fou", 0xb7f2: "fu", 0xb8c1: "ga", " 0xb8d4: "gang", 0xb8dd: "gao", 0xb8e7: "ge", 0xb8f8: "gei", 0xb8f9: "gen", 0xb8fb: "gen", 0xb9a4: "gong", 0xb9b3: "gou", 0xb9a4: "gong", 0xb9b3: "gou", 0xb9a4: "gong", 0xb9b3: "gou", 0xb9a4: "gong", 0xb9b3: "gou", 0xb9a4: "gong", 0xb9b3: "gou", 0xb9: 0xb9d4: "guai", 0xb9d7: "guan", 0xb9e2: "guang", 0xb9e5: "gui", 0xb9f5: "pistola", 0xb9f8: "guo", 0xb9fe: "ha", 0xbaa1: "hii", 0xBa ", 0xbabe: "hao", 0xbac7: "he", 0xbad9: "hei", 0xbadb: "hen", 0xbadf: "heng", 0xBae4: "hong", 0xBaEd: "hou", 0xBaf4: "hu", 0xbBa8: huAd: hua ", 0xBaf4:" HONBBBA8: 0XBAED: "hou", 0xBaf4: "hu", 0xbBa8: hUa " "hua", 0xbbc4: "huang", 0xbbd2: "hui", 0xbbe7: "hun", 0xbbed: "huo", 0xbbf7: "ji", 0xbcce: "jia", 0xbcdf: "jian", 0xbdA9, 0xbdd2: "jie", 0xbded: "jin", 0xbea3: "jing", 0xbebc: "jiong", 0xbebe: "jiU", 0xbecf: "ku", 0xbee8: "juan", 0xbeef: "jue", 0xBef9, " "kai", 0xbfaf: "kan", 0xbfb5: "kang", 0xbfbc: "kao", 0xbfc0: "ke", 0xbfcf: "ken", 0xbfcf: "ken", 0xbfd3: "keng": 0xbfd5: " 0xbfdd: "ku", 0xbfe4: "kua", 0xbfe9: "kuai", 0xbfed: "kuan", 0xbfef: "kuang", 0xcff7: "kui", 0xc0a: "kun", 0xc0a8: "kui", 0xc0a: "kun", 0xc0a8: " "Lai", 0xc0b6: "LAN", 0xc0c5: "lang", 0xc0cc: "lao", 0xc0d5: "le", 0xc0d7: "Lei", 0xc0e2: "Leng", 0xc0e5: "li", 0xc1a9 "leng", 0xc0e5: "li", 0xc0e2: "leng", 0xc0e5: "li", 0xc1a9 "leng", 0xc0e5: "li", 0xc0e2: "leng", 0xc0e5: "li", 0xc1a9 "leng", 0xc0e5: "li", 0xc0e2: "leng", 0xc0e5: "li", 0xc1a9 "leng", 0xc0e5: "li", 0xc0e2: "Leng", 0xc0e5: "li", 0xc1a9 " "liang", 0xc1c3: "liao", 0xc1d0: "lie", 0xc1d5: "lin", 0xc1e1: "ling", 0xc1ef: "liU", 0xc1fa: "long", 0x2a5: "Lou", 0xc22 "lu" lu "," LUM ", 0xc2c1f: 0xc1fa:" long ", 0xc2a5:" Lou ", 0xc22" Lu "Lu:" Long ", 0xc2a5:" Lou ", 0xc22" Lu: "Lu", 0xc2c2aC: "LIU", 0xc1fa: "Long", 0xc2a5: "Lou", 0xc22 "" "luan", 0xC2D3: "lue", 0xC2D5: "lun", 0xC2DC: "luo", 0xC2E8: "ma", 0xC2F1: "mai", 0xC2F7: "man", 0xC3A2: "meng", 0xC3A8: "mao", 0xC3B4: "me", 0xC3B5: "Mei", 0xc3c5: "Men", 0xc3c8: "meng", 0xc3d0: "mi", 0xc3de: "mian", 0xc3e7: "miao", 0xc3ef: "mie", 0xc3f1: "min", 0x7f7 " "MO", 0xc4b1: "MOU", 0xc4b4: "mu", 0xc4c3: "na", 0xc4ca: "nai", 0xc4cf: "nan", 0xc4d2: "nang", 0xc4d3: "nao", 0xc4d8: "nang", 0xc4d3: "nao", 0xc4d8 " "Nen", 0xc4dc: "neng", 0xc4dd: "ni", 0xc4e8: "nian", 0xc4ef: "niang", 0xc4f1: "niao", 0xc4f3: "nie", 0xc4fa: "nin", 0xc4fb: "ninb: "c4f3:" Niao: 0xc4f3: "NIG: 0XC4F:" NIG: 0xc4f: "NIGN:" C: 0xc5a7: "Nong", 0xc5ab: "nu", 0xc5ae: "nv", 0xc5af: "nuan", 0xc5b0: "nue", 0xc5b2: "nUo", 0xc5b6: "o", 0xc5b2: "0x, 0xc. 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", 0xciAr. 0xc7d5: "qin", 0xc7e0: "qing", 0xc7ed: "qiong", 0xc7ef: "qiU", 0xc7f7: "quil", 0xc8a6: "quan", 0xc8b1: "que", 0xc8b 0: "qan", 0xc8b1: "que", 0xc8b9: "qan", 0xc8b1: "quê", 0xc8b9: "qan", 0xc8b1: "quet", 0xc8b9: "qan", 0xc8b1: "quê", 0xc8b8b8a6: 0xc8c4: "RAO", 0xc8c7: "re", 0xc8c9: "ren", 0xc8d3: "reng", 0xc8d5: "ri", 0xc8d6: "rong", 0xc8e0: "rou", 0xc8e3: "ru 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", 0xCBC9: "song", 0xCBD1: "Sou", 0xcbd4: "su", 0xcbe1: "suan", 0xcBe4: "sui", 0xcbef: "Sun", 0xcbf2: "suo", 0xcbfa: "Ta", 0xcCA5: "Tai", 0xcCae: "0x", 0xcCa5: "Tai", 0xcCae: tan: 0x "," TaNC, 0xccA5: "Tai", 0xcCae: "0x", 0xcCa5: "Tai", 0xcCae: tan: 0x "," TaNC, 0xccA5: "Tai", 0xcCae: "0X", 0xccd8: "te", 0xccd9: "teng", 0xccdd: "ti", 0xcCec: "tian", 0xccf4: "tiao", 0xccf9: "tie", 0xccc: "ting: 0xcda8:" 0x ", 0xccc:" ting: 0xcda8: "0x", 0xccccc: "ting: 0xcda8:" 0x ", 0xccccc:" ting: 0xcda8: "tong", "the", 0xccfc: "ting", 0xcda8: "0x", 0xccd: "ting: 0xcda8:" 0x ", 0xccfc:" ting: " 0xcdc4: 0xcdc6: "tui", 0xcdcc: "tun", 0xcdcf: "tuo", 0xcdda: "wa", 0xcde1: "wai", 0xcde3: "wan", 0xcdf4: "wang", 0xcdfe: " "weng", 0xcece: "wo", 0xced7: "wu", 0xcef4: "xi", 0xcfb9: "xia", 0xcfc6: "xian", 0xcfe0: "xiang", 0xcff4: "xiang", 0xcf4: "xiang", 0xcff4: "xiang", 0xcf4: "xiang", 0xcff4: "xiang", 0xcf4: " "xin", 0xd0c7: "xing", 0xd0d6: "xiong", 0xd0dd: "xiU", 0xd0e6: "xu", 0xd0f9: "xuan", 0xd1a5: "xue", 0xd1ab: "xun", 0xd1b: 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: "zhan", 0xd5c1: "Zhen", 0xd5f4: "Zheng", 0xd6a5: "zhi", 0xd6d0: "zhong", 0xd6db: "zhou", 0xd6e9: "zhu", 0xd7a5: "zhua", 0xd7a7: "zhu", 0xd7a5: "zhua", 0xd7a7: 0xd7ae: "Zhuan", 0xd7b5: "zhui", 0xd7bb: "zhun", 0xd7bd: "zhuo", 0xd7c8: "zi", 0xd7d7: "zong", 0xd7de: "zou", 0xd7e2: " 0xd7ec: "zui", 0xd7f0: "zun", 0xd7f2: "zuo"}; var spellArray = new Array (); var pn = ""; função pinyin (char) {if (! char.charcodeat (0) || char.charcodeat (0) <1328) retornar char; if (spellArray [char.charcodeat (0)]) retorna spellArray [char.charcodeat (0)] execScript ("ASCCode = Hex (asc (/" "" + char + "/")), "vbscript"); ASCCode = Eval ("0x" + ASCCode); if (! (ASCCODE> 0XB0A0 && ASCCODE <0XD7F3)) return char; para (var i = asccode; (! Spell [i] && i> 0);) i--; retornar feitiço [i]; } função topinyin (str) {var pstr = "" para (var i = 0; i <str.length; i ++) {if (str.charat (i) == "/n") pstr += "<br>" else pstr += "<ruby style = 'ruby-align: center'" +str.Charat (i) +"" ruby = 'ruby-align: center'> " +str. (i) +" " "</rt> </fuby>" // else pstr + = pinyin (str.charat (i)) + ""} retorna pstr; } função topinyinonly (str) {var pstr = "" para (var i = 0; i <str.length; i ++) {if (str.charat (i) == "/n") pstr += "<br>" else pstr += pinyin (str.charat (i)); // pstr + = "" + pinyin (str.charat (i)); // else pstr + = pinyin (str.charat (i)) + ""} retorna pstr; } função topinyinshengmu (str) {var pstr = "" para (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)) + ""} retorna pstr; } função pinyinsort (a, b) {var rvalue = 0 para (var i = 0; i <a.length; i ++) {var pina = pinyin (a.charat (i)) var pinb = pinyin (B.Charat (i)) se (rvalue = pina> pinb? 1: pina <PinB? -1: 0) Break) Veja os fragmentos de código derivados dos meus fragmentos de código no código <! Doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <script type = "text/javascript" src = "js/autocompletom.jscr"> </script> <script "typen"/js/js/js/autocompletElete "> </script> <script" src = "js/pinyinhanzi.js"> </script> <script type = "text/javascript"> // Regras personalizadas CompareRules da função (inputStr, selectText) {// corresponde a caracteres chineses e Pinyin return SelectText.indexOF (inputStr)! = -1 || topinyinshengmu (selectText) .IndexOf (inputStr)! = -1 || topinyinonly (selectText) .IndexOf (inputStr)! = -1; } addloadevent (func); function func () {var textObj = document.getElementById ("txtDisplay"); var cityObj = document.getElementById ("cidade"); var autoComplete = new AutoComplete (textObj, cityobj, 10, 300); AutoComplete.init (); } </script> </ad Head> <body> <input type = "text" id = "txtDisplay"/> <select id = "city"> <opção value = "1"> beijing </pption> <opção de opção = "2"> shanghai </pption> <opção "3"> chifring </option </option> </option> </option> </option> </option> </option> </option> </option> </option> <puttion> "</option </pption> <opção" 3 "> chifring ="> value = "6"> tianjin </pption> <opção value = "7"> shenyang </pption> <opção value = "8"> nanjing </pption> <opção value = "9"> wuhan </option> option Value = "10"> changchun </option> <pution = "11"> chengdu <//> </> </"> value = "13"> hangzhou </pption> <opção value = "14"> qingdao </pption> <opção value = "15"> jinan </pption> <opção value = "16"> xiamen </option> <opção value = "17"> fuzhou </pption> <opção ""> 18 "> xi'an <///> value = "20"> harbin </pption> </leclect> </body> </html>Nota: Esta versão possui alguns bugs e incompatibilidade com outros navegadores (exceto iii).
O exposto acima é o conhecimento relevante introduzido para você sobre o JS que implementa a função de recuperação de pinyin de suporte à ComboBox no IE8. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!