Recientemente encontré un problema JS en IE8. Necesito implementar (IE8) para usar pinyin o las primeras letras para recuperar el contenido en selección. El Combobox original solo podría admitir la entrada y búsqueda de personajes chinos, y ahora necesito mejorarlo. Ahora grabaré el método de implementación paso a paso. La función es simple, y puede haber errores y deficiencias para la referencia de aprendizaje. (Este artículo solo proporciona aprendizaje de ideas y copias de seguridad. En la situación real, debe usarse en el modo de compatibilidad IE8 o IE, por lo que no se tienen en cuenta otros navegadores)
Estructura del directorio:
prueba
| --js
| --index.html
Agregar en la 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"> <opción valor = "1"> beijing </opción> <opción valor valor = "2"> shanghai </ppection> <opción valor = "3"> guangzhou </opción> <opción valor = "4"> shenzhen </opción> <opción valor = "5"> chongqing </opción <option = "6"> tianjin </opción <opción> <opción> <opción valor = "5"> chongqing </opción <opción) value = "7"> shenyang </opción> <opción value = "8"> nanjing </opción> <opción value = "9"> wuhan </opción> <opción value = "10"> changchun </ppection> <option value = "11"> chengdu </option> <opción valor = "12"> dalian <//valor de opción <opción <opción <opción <opción> 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>
Efecto: comience a ocultar el cuadro de lista desplegable de Select. Al hacer clic en el cuadro de texto de entrada, visualelo en la parte inferior del cuadro de entrada. Después de completar la selección, oculte la selección.
Implementación JS:
Si una página tiene múltiples lugares para implementar tales funciones, debe usar el pensamiento orientado a objetos y reutilizar el código tanto como sea posible. Necesitamos personalizar una colección como AP.
autocomplete.js
Function Map () { / ** matriz para almacenar las teclas (utilizadas para traversal)* / this.keys = new Array (); / ** Tienda datos*/ this.data = new Object (); / ** * Pon un par de valores clave * @param {String} Key * @param {object} valor */ this.put = function (key, valor) {if (this.data [key] == null) {this.keys.push (key); } this.data [clave] = valor; }; / ** * Obtenga el valor correspondiente a una tecla * @param {String} Key * @return {object} valor */ this.get = function (key) {return this.data [key]; }; / *** Eliminar un par de valores clave* @param {String} key*/ this.remove = function (key) {this.keys.remove (clave); this.data [key] = null; }; / ** * atravesando el mapa y ejecutando la función de procesamiento * * @param {function} función de devolución de llamada (key, valor, index) {..} */ this.each = function (fn) {if (typeOf fn! = 'Function') {return; } var len = this.keys.length; para (var i = 0; i <len; i ++) {var k = this.keys [i]; fn (k, this.data [k], i); }}; / *** Obtenga una matriz de valor clave (similar a la entrada de Java ())* @return del objeto Key-Value {Key, valor}*/ this.entrys = function () {var Len = this.keys.length; entrys var = nueva matriz (len); for (var i = 0; i <len; i ++) {entrys [i] = {key: this.keys [i], valor: this.data [i]}; } Entradas de retorno; }; / *** Determine si el mapa está vacío*/ this.isempty = function () {return this.keys.length == 0; }; / *** Obtenga el número de pares de valor clave*/ this.size = function () {return this.keys.length; }; / ** * Reescribir toString */ this.ToString = function () {var s = "{"; para (var i = 0; i <this.keys.length; i ++, s+= ',') {var k = this.keys [i]; s+= k+"="+this.data [k]; } s+= "}"; regreso s; }; } Array.prototype.remove = function (s) {for (var i = 0; i <this.length; i ++) {if (s == [i]) this.splice (i, 1); }}Ahora necesitamos escribir un archivo de entrada de carga del programa, que se utiliza para pasar la entrada y seleccionar objetos, y luego realizar una serie de operaciones como el enlace de eventos.
var autocompletEmap = new Map (); // Contenedor de componentes, que es conveniente para llamar cuando el evento de componente conduce, y admite administración de múltiples componentes var splitfleg = "_"; // separator/*** cuadro de texto, cuadro desplegable se combina en un componente de finalización automático* @param {objeto} Txtobj Box Box Object* @param {Object} SELECTOBJ Buzón desplegable Object* @Param {int} Seleccionar Mostrar el número de cuadros* @Param {int} Longitud de longitud de longitud de longitud descendente selectLength) {this.cacheContainer = new Array (); // Contenedor de caché, utilizado para almacenar en caché el contenido en la opción de Cachecontainer cuando la página se acaba de cargar. This.init = function () {this.initCache (); // Datos de caché, caché los datos de opción a Cachecontainer this.initcss (); // Inicializar CSS y ocultar Seleccionar esto.RegistereVent (); // registrar evento this.setselectidPosition (); // Establecer la ubicación de Select // Componente actual de caché para facilitar la llamada cuando el evento componente conducido. Al mismo tiempo, admite administración de múltiples componentes autocompletEmap.put (txtobj.id + selectObj.id, this); // Después de actualizar la interfaz, escriba el valor de texto del cuadro desplegable de la agencia directa en el cuadro de texto var selectIndex = selectObj.selectedIndex; if (selectIndex> 0) // El primer contenido es generalmente [seleccione]. Si no, cambie> 0 a> = 0 txtobj.value = selectObj.options [selectIndex] .Text; } // Datos de caché de datos y caché Los datos de la opción de 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 = "Ninguno"; selectobj.style.position = "Absolute"; selectobj.style.zindex = 2; selectobj.style.width = selectLength + "Px"; selectObj.multiple = "múltiple"; txtobj.style.width = selectLength - 5 + "px"; } this.RegisterEvent = function () {// Caja desplegable Evento selectObj.ondblClick = this.doubleClicKevent; selectObj.OnKeyUp = this.KeyUpEvent; selectObj.onblur = this.onblurevent; selectObj.Onfocus = this.OnfocusEvent; // Evento de cuadro de texto txtobj.onfocus = this.onfocusEvent; txtobj.onblur = this.onblurevent; txtobj.onkeyup = this.txtobjkeyUpevent; } this.setselectidPosition = function () {var posición = this.findPosition (txtobj); selectObj.style.left = posición [0] + "Px"; selectobj.style.top = posición [3] + 3 + "Px"; } this.findPosition = function (oElement) {var x2 = 0; var y2 = 0; Var ancho = oelement.OffSetWidth; var altura = oelement.Offsetheight; if (typeof (oelement.offsetParent)! = 'Undefined') {for (var posx = 0, posy = 0; oelement; oelement = oelement.offsetParent) {posx += oelement.offsetleft; posy += oelement.offsettop; } x2 = posx + ancho; y2 = posy + altura; return [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 srcelem = document.activeElement; // Obtenga el objeto VAR actualmente enfocado testVal = srcelem.id; if (testVal == selectObj.id) {autocomplete.DoUbleClicKeVent (); }}} / *** Evento de enfoque* / this.onblurevent = function () {var srcelem = document.activeElement; var testVal = srcelem.id; if (testVal! = selectObj.id && testVal! = txtobj.id) {// Si el cuadro de entrada actual o la lista de selección no está enfocado, selectObj.style.display = "Ninguno"; // Ocultar la lista Seleccionar}}/*** Evento de enfoque*/this.onfocusEvent = function () {var autocomplete = autocompletEmap.get (txtobj.id + selectObj.id); autocomplete.setselectidPosition (); var srcelem = document.activeElement; var testVal = srcelem.id; if (testVal == selectobj.id || testVal == txtobj.id) {// enfócate en el objeto actual if (txtobj.value.length! = 0) {// Cuando hay caracteres en el cuadro de entrada, no se realiza ninguna operación; } var selectIdLength = selectObj.options.length; if (selectIdLength> selectSize) {selectObj.size = selectSize; } else {selectObj.size = selectIdLength; } selectobj.style.display = "bloque"; }} var myTimeOut = null; / ** * El mouse del cuadro de texto se centra en el evento de lanzamiento, establece un temporizador, ejecuta la función en cada hora específica, consulte los datos de lista Seleccionar coincidentes en el cuadro de entrada y visualización */ this.txtobjkeyUpevent = function () {var autocomplete = autocompletEmap.get (txtobj.id + selectobj.id); if (event.keycode == 40) {// Haga clic en la tecla de flecha del teclado en el cuadro de entrada, y no hay necesidad de buscar en este momento. El evento de búsqueda se activa cuando se ingresa var srcelem = document.activeElement; var testVal = srcelem.id; if (testVal == txtobj.id) {selectObj.focus (); if (selectObj.options.length> = 1) selectObj.options [0] .selected = true; } devolver; } if (autocomplete.mytimeout! = null) {// borrar el evento de ejecución temporal establecido ClearTimeOut (Autocomplete.myTimeOut); } autocomplete.myTimeOut = setTimeOut (autocomplete.doajax, 200); } // ----------------------------------------------------------------------------------------------------------------------------------------------- function () {var autocomplete = autocompletEmap.get (txtobj.id + selectObj.id); // Borrar las opciones originales autocomplete.ClearAlLOptions (); autocomplete.setselectidPosition (); var inputstr = txtobj.value; varillas var = autocomplete.compeInput (inputStr); // coincide con los datos que cumplen con las condiciones de consulta si (arrays == null || arrays.length == 0) {selectObj.style.display = "Ninguno"; devolver; } selectobj.style.display = "bloque"; for (var i = 0; i <arrays.length; i ++) {var optionParams = arrays [i] .split (splitFleg); var opt = nueva opción (); opt.text = optionParams [0]; opt.Value = optionParams [1]; selectobj.add (opt); } if (arrays.length> selectSize) {selectObj.size = selectSize; } else {selectobj.size = arrays.length; }} / ** * Borre las opciones originales * / this.ClearAlLOptions = function () {// Borrar las opciones originales 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, ""); // Retire la cadena en blanco en el fronting inputstr = this.DeletespecialSpace (inputStr); // Eliminar la cadena en blanco especial if (inputStr == null || inputstr.length == 0) {return this.cacheContainer; } inputStr = DisableSpecialCharacter (inputStr); // Procesamiento de caracteres especiales var resultarray = new Array (); var k = 0; var selectText = ""; for (var i = 0; i <this.cacheContainer.length; i ++) {selectText = (this.cacheContainer [i] .split (splitfleg) [0]). reemplazar (/(^[/s]*)/g, ""); selectText = this.deletespecialSpace (selectText); if (comparación (inputStr, selectText)) {// Regla de coincidir resultray [k] = this.cacheContainer [i]; K ++; }} return uniquearray (resultarray); } / *** Eliminar cadena especial en blanco* / this.DeletespecialSpace = function (srcstr) {var temp = ""; for (var i = 0; i <srcstr.length; i ++) {var charstr = srcstr.charat (i); // espacio especial en la interfaz unicode = 160, este espacio no es ni ancho completo ni medio ancho if (charstr.charcodeat (0) == 160) {continuar; } temp += charstr; } return temp; }}/*** @param {String} Inputstr Caracteres que deben filtrarse* Procesamiento de caracteres especiales*/function DisableSpecialCharacter (inputStr) {inputStr = inputStr.replace (new RegExp ("///", 'G'), "////"); inputStr = inputstr.replace (new Regexp ("//.", 'G'), "//."); inputStr = inputstr.replace (new Regexp ("//^", 'g'), "//^"); inputStr = inputStr.replace (new Regexp ("// {", 'g'), "// {"); inputStr = inputstr.replace (new Regexp ("// [", 'G'), "// ["); inputStr = inputStr.replace (new Regexp ("// (", 'g'), "// ("); inputStr = inputStr.replace (new Regexp ("// |", 'g'), "// |"); inputStr = inputS.Replace (new RegExp ("//], 'g')," //] ");"); Regexp ("//]", 'g'), "//]"); inputStr = inputstr.replace (new Regexp ("//*", 'g'), "//*"); inputStr = inputStr.replace (new Regexp ("//+", 'g'), "//+"); inputStr = inputStr.replace (new Regexp ("//?", 'G'), "//?"); return inputstr; } /*** Reglas de coincidencia* @param {String} Inputstr Enumer Box Caracter, coincide con la condición* @param {String} selectText coincide con Text* /Function Compares (inputStr, selectText) {// coincidir con los caracteres chinos returnText.indexof (inputStr)! = -1; } / *** Datos duplicados de filtro* @param {objeto} Arrriz de resultados ARR* / function uniquearray (arr) {if (arr == null || arr.length == 0) {return arr; } return arr.reverse (). Únete (","). } / *** Agregar función personalizada para ejecutar en la función original* @param {object} function de carga* / función addLoadeVent (func) {var oldLoad = window.onload; if (typeof window.onload! = 'function') {window.onload = func; } else {window.onload = function () {oldonload (); func (); }}}}Introducir la herramienta JS para convertir los caracteres chinos en 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: 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: "CHAC", 0xb2f0: 0xb2f0: "chai", 0xb2f3: "chan", 0xb2fd: "chang", 0xb3ac: "chao", 0xb3b5: "che", 0xb3bb: "chen", 0xb3c5: "cheng", 0xb3d4: "chi", 0xb3e4: " "chu", 0xb4a7: "chuai", 0xb4a8: "chuan", 0xb4af: "chuang", 0xb4b5: "chui", 0xb4ba: "chun", 0xb4c1: "chuo", 0xb4c3: "ci", 0xb4cf: "cong", 0xB4: " 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: "di", 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: "", 0xb7aa: 0xB7BB: "fang", 0xB7C6: "fei", 0xB7D2: "fen", 0xB7E1: "feng", 0xB7F0: "fo", 0xB7F1: "fou", 0xB7F2: "fu", 0xB8C1: "ga", 0xB8C3: "gai", 0xB8C9: "gan", 0xb8d4: "pandilla", 0xb8dd: "gao", 0xb8e7: "ge", 0xb8f8: "gei", 0xb8f9: "gen", 0xb8fb: "gen", 0xb9a4: "gong", 0xb9b3: "gou", 0xb9bc: "gu", 0xb9ce, "Gu", "Gua," Gua "," Gua, "Gua," Gua, "Gua", "Gua," Gua, "Gua," Gua, "Gua," Gua, "Gua," Gua, "Gua," Gua, "Gua," Gua, "," Gua, "Gua," Gua, "," Gua, "Gua," GuA "," Gua, "GuA," GuA "," GUA ". 0xb9d4: "Guai", 0xb9d7: "Guan", 0xb9e2: "Guang", 0xb9e5: "Gui", 0xb9f5: "Gun", 0xb9f8: "Guo", 0xb9fe: "Ha", 0xbaa1: "Hai", 0xbaa8: "Han", 0xbabb: "Hang", "Hang", "Hang", Hang "," Hang "," Hang " 0xBABE: "hao", 0xBAC7: "he", 0xBAD9: "hei", 0xBADB: "hen", 0xBADF: "heng", 0xBAE4: "hong", 0xBAED: "hou", 0xBAF4: "hu", 0xBBA8: "hua", 0xBB1: "hua", 0xBBB6: "Hua", 0xbbc4: "Huang", 0xbbd2: "Hui", 0xbbe7: "hun", 0xbbed: "Huo", 0xbbf7: "ji", 0xbcce: "jia", 0xbcdf: "jian", 0xbda9: "jiang", 0xbdb6: "jia", "jia", "jia", "jia", "JiAng6:" jia "," jia "," jia ". 0xbdd2: "jie", 0xbded: "jin", 0xbea3: "jing", 0xbebc: "jiong", 0xbebe: "jiu", 0xbecf: "ju", 0xbee8: "jUan", 0xbeef: "jue", 0xbef9: "jun", 0xbfa6: "kfaf", 0xbfa, 0xbfa, 0xbfa, 0xbfa, 0xbfa, 0xbfa. "kai", 0xbfaf: "kan", 0xbfb5: "kang", 0xbfbc: "kao", 0xbfc0: "ke", 0xbfcf: "ken", 0xbfcf: "ken", 0xbfd3: "keng", 0xbfd5: "kong", 0xbfd9: "ken ke 0xbfdd: "ku", 0xbfe4: "kua", 0xbfe9: "kuai", 0xbfed: "kuan", 0xbfef: "kuang", 0xbff7: "kui", 0xc0a4: "kun", 0xc0a8: "kuo", 0xc0ac: "la", 0xc0b3: 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: "hombre", 0xc3a2: "Meng", 0xc3a8: "mao", 0xc3b4: "me", "me". 0xc3b5: "mei", 0xc3c5: "hombres", 0xc3c8: "Meng", 0xc3d0: "mi", 0xc3de: "mian", 0xc3e7: "miao", 0xc3ef: "miie", 0xc3f1: "min", 0xc3f7: "ming", 0xc3fd: 0xc3fd: "miu", 0xc3fe: "mo", 0xc4b1: "mou", 0xc4b4: "mu", 0xc4c3: "na", 0xc4ca: "nai", 0xc4cf: "nan", 0xc4d2: "nang", 0xc4d3: "nain", 0xc4d8: "n", 0xc4, 0xd9: "nei", 0xc4db: "nen", 0xc4dc: "neng", 0xc4dd: "ni", 0xc4e8: "niian", 0xc4ef: "niiang", 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 0xc6b2: "PIE", 0xc6b4: "pin", 0xc6b9: "ping", 0xc6c2: "po", 0xc6cb: "pu", 0xc6da: "qi", 0xc6fe: "qia", 0xc7a3: "qian", 0xc7b9: "qiansg", 0xc71: "QiAoO", "QiAc. 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", "sen". 0xc9ae: "seng", 0xc9af: "sha", 0xc9b8: "shai", 0xc9ba: "shan", 0xc9ca: "shang", 0xc9d2: "shao", 0xc9dd: "ella", 0xc9e9: "shen", 0xc9f9: "sheng", 0xcaa6: "shhen", "shhen 0xcad5: "shou", 0xcadf: "shu", 0xcba2: "shua", 0xcba4: "shuai", 0xcba8: "shuan", 0xcbaa: "shuang", 0xcbad: "shui", 0xcbbb1: "shun", 0xcbb5: "shuo", 0xcbc9 "," shuo ", 0xcbc9", 0xcbd1: "sou", 0xcbd4: "su", 0xcbe1: "suan", 0xcbe4: "sui", 0xcbef: "sun", 0xcbf2: "suo", 0xcbfa: "ta", 0xcca5: "tai", 0xccae: "tan", 0xcc0: "TAng", 0xcd, 0xcd, 0xcd: 0xcd. "tao", 0xCCD8: "te", 0xCCD9: "teng", 0xCCDD: "ti", 0xCCEC: "tian", 0xCCF4: "tiao", 0xCCF9: "tie", 0xCCFC: "ting", 0xCDA8: "tong", 0xCDB5: "tou", 0xCDB9: "tu", 0xCDC4: 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: "xiang", 0xCF4: "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: ", 0xd3d3d3d9, 0xd9, 0xd9, 0xd9: "yu", 0xd4a7: "yuan", 0xd4bb: "yue", 0xd4c5: "yun", 0xd4d1: "za", 0xd4d4: "zai", 0xd4db: "zan", 0xd4df: " 0xd4f4: "zei", 0xd4f5: "zen", 0xd4f6: "zeng", 0xd4fa: "zha", 0xd5aa: "zhai", 0xd5b0: "zhan", 0xd5c1: "zhang", 0xd5d0: "zhao", 0xd5Da: ",", "ZHAN 0xd5e4: "zhen", 0xd5f4: "zheng", 0xd6a5: "zhi", 0xd6d0: "zhong", 0xd6db: "zhou", 0xd6e9: "zhu", 0xd7a5: "zhua", 0xd7a7: "zhua", 0xd7a8: "Zhuan", 0xd7ae: "zhuan", 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 = ""; función pinyin (char) {if (! char.charcodeat (0) || char.charcodeat (0) <1328) return Char; if (spellArray [char.charcodeat (0)]) return spellArray [char.charcodeat (0)] ejecutscript ("asccode = hex (asc (/" " + char +"/"))", "vBscript"); asccode = eval ("0x" + asccode); if (! (asccode> 0xb0a0 && asccode <0xd7f3)) return char; for (var i = asccode; (! Spell [i] && i> 0);) i--; hechizo de regreso [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> </buby>" // else pstr + = pinyin (str.charat (i)) + ""} return pstr; } función topinyInonly (str) {var pstr = "" para (var i = 0; i <str.length; i ++) {if (str.charat (i) == "/n") pstr += "<br>" más pstr += pinyin (str.charat (i)); // pstr + = "" + pinyin (str.charat (i)); // else pstr + = pinyin (str.charat (i)) + ""} return pstr; } función 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)) + ""} return pstr; } function pinyInsort (a, b) {var rValue = 0 for (var i = 0; i <a.length; i ++) {var piña = pinyin (a.charat (i)) var pinb = pinyin (b.charat (i)) if (rvalue = piNA> pi? 1: piN <pinb? --1: 0) break} rurn} rvalue} Ver fragmentos de código de vista simple de copia derivadas de mis fragmentos de código en el código <! DocType html> <html> <adhead> <meta charset = "utf-8"> <title> </title> <script type = "text/javascript" src = "js/autocomplete.js"> </script> <script type = "text/javascript" src = "js/pinyinhanzi.js"> </script> <script type = "text/javaScript"> // comparaciones de funciones de reglas personalizadas (inputStr, selectText) {// coincide con los caracteres chinos y el retorno de pinyin selectText.indexf (inputStr)! = -1 || topinyinshengmu (selectText) .indexof (inputstr)! = -1 || topinyinonly (selectText) .indexof (inputStr)! = -1; } addLoadEvent (func); función func () {var textobj = document.getElementById ("txtDisplay"); var cityObj = document.getElementById ("ciudad"); var autocomplete = new AutoComplete (TextObj, CityObj, 10, 300); autocomplete.init (); } </script> </head> <body> <input type = "text" id = "txtDisplay"/> <select id = "City"> <opción Valor = "1"> Beijing </opción> <opción valor = "2"> shanghai </opción> <opción valor = "3"> guangzhou </opción> <opción valor = "5"> chongqing </opción> <opción> value = "6"> Tianjin </opción> <opción valor valor = "7"> shenyang </opción> <opción value = "8"> nanjing </opción> <opción value = "9"> wuhan </option> <opción valor = "10"> Changchun </opción> <opción Valor = "11"> chengdu </p los valores de opción = "12"> Dalian <Dalian <Dalian </opción </opción> <Opción Valor = "11"> CHENGDU </p los opcion value = "13"> Hangzhou </opción> <opción value = "14"> Qingdao </opción> <opción value = "15"> jinan </opción> <opción valor valor = "16"> xiamen </opción> <opción valor = "17"> fuzhou </opción> <opción valor = "18"> xi'an <//option> value = "19"/cangssha </opción </opción> value = "20"> Harbin </option> </select> </body> </html>Nota: Esta versión tiene algunos errores e incompatibilidad con otros navegadores (excepto III).
Lo anterior es el conocimiento relevante que se le presentó sobre la implementación de la función de recuperación de Pinyin de soporte de Combobox en IE8. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!