Kürzlich habe ich in IE8 auf ein JS -Problem gestoßen. Ich muss (IE8) implementieren, um Pinyin oder erste Buchstaben zu verwenden, um den Inhalt in Select abzurufen. Der ursprüngliche Combobox konnte nur die chinesischen Charaktereingabe und -suche unterstützen, und jetzt muss ich ihn verbessern. Jetzt werde ich die Schritt-für-Schritt-Implementierungsmethode aufzeichnen. Die Funktion ist einfach und es kann Fehler und Mängel für das Lernen von Referenz geben. (Dieser Artikel bietet nur Ideenlernen und Backup. In der tatsächlichen Situation muss er in IE8 oder IE -Kompatibilitätsmodus verwendet werden, sodass andere Browser nicht berücksichtigt werden.)
Verzeichnisstruktur:
prüfen
|-Js
| --Index.html
Fügen Sie in der Indexseite hinzu
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"> <Option Value = "1"> Beijing </option> <Option Value = "2"> Shanghai </Option> <Option Value = "3"> Guangzhou </option> <Option Value = "4"> Shenzhen </option> </option -value = "5"> chargQing </option> </option = "option =" 6 "> tianjin value = "7"> shenyang </option> <option value = "8"> nanjing </option> <option value = "9"> wuhan </option> <option value = "10"> changchun </option> <option value = "11"> chengdu 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>
Effekt: Verstecken Sie das Dropdown-Listenfeld von SELECT. Zeigen Sie beim Klicken auf das Textfeld Eingabetaste ganz unten im Eingabefeld an. Verstecken Sie nach Abschluss der Auswahl die Auswahl.
JS -Implementierung:
Wenn eine Seite über mehrere Orte verfügt, um solche Funktionen zu implementieren, müssen Sie objektorientiertes Denken verwenden und den Code so weit wie möglich wiederverwenden. Wir müssen eine Sammlung wie AP anpassen.
autocomplete.js
Funktion MAP () { / ** Array zum Speichern der Tasten (verwendet für den Durchgang)* / this.keys = new Array (); / ** Daten speichern*/ this.data = new Object (); / ** * ein Schlüsselwertpaar eingeben * @param {String} Key * @param {Objekt} Wert */ this.put = function (Schlüssel, Wert) {if (this.data [key] == null) {this.keys.push (key); } this.data [Schlüssel] = Wert; }; / ** * Erhalten Sie den Wert, der einem Schlüssel entspricht }; / *** Löschen Sie ein Schlüsselwertpaar* @param {string} key*/ this.remove = function (key) {this.keys.remove (key); this.data [key] = null; }; / ** * Durchqueren der Karte und Ausführung der Verarbeitungsfunktion * * @param {Funktion} Rückruffunktion (Schlüssel, Wert, Index) {..} */ this.eaSew = Funktion (fn) {if (typeof fn! = 'Function') {return; } var len = this.keys.length; für (var i = 0; i <len; i ++) {var k = this.keys [i]; fn (k, this.data [k], i); }}; / *** Holen Sie sich ein Schlüsselwert-Array (ähnlich wie Javas Einstieg ())* @return-Array des Schlüsselwert-Objekts {Schlüssel, Wert}*/ this.Enrys = function () {var len = this.keys.Length; vareinträge = Neuarray (Len); für (var i = 0; i <len; i ++) {Einträge [i] = {Schlüssel: this.keys [i], Wert: this.data [i]}; } Rückgabeinträge; }; / *** Bestimmen Sie, ob die Karte leer ist }; / *** Erhalten Sie die Anzahl der Schlüsselwertpaare*/ this.size = function () {return this.keys.length; }; / ** * Schreiben Sie das ToString um */ this.toString = function () {var s = "{{"; für (var i = 0; i <this.keys.length; i ++, s+= ',') {var k = this.keys [i]; s+= k+"="+that.data [k]; } s+= "}"; Rückkehr s; }; } Array.prototype.remove = Funktion (s) {für (var i = 0; i <this.Length; i ++) {if (s == this [i]) this.Splice (i, 1); }}Jetzt müssen wir eine Programmlade -Eintragungsdatei schreiben, mit der Eingaben übergeben und Objekte ausgewählt werden können, und dann eine Reihe von Operationen wie die Ereignisbindung durchführen.
var AutoCompletemap = new map (); // Komponentencontainer, der beim Aufrufen von Komponentenereignissen bequem ist, und unterstützt die Mehrkomponentenverwaltung var splitfleg = "_"; // Separator/*** Textfeld, Dropdown-Feld wird zu einer automatischen Fertigstellungskomponente kombiniert* @param {Objekt} TxtObj-Textfeld Objekt* @param {Objekt} selectObj-Objekt* @param {int} SELECTSIZE-Anzahl der Anzahl der Dropdown-Boxen ausgewählt. selectLength) {this.cacheContainer = new Array (); // Cache -Container, verwendet, um den Inhalt in der Option zu CacheContainer zu speichern, wenn die Seite gerade geladen ist. This.init = function () {this.initcache (); // Daten zwischengespeichert, die Optionsdaten an CacheContainer this.initcss () zwischenspeichern. // CSS initialisieren und ausblenden, wählen Sie dies. RegisterEvent (); // Event this.setSelectIdPosition () registrieren; // Setzen Sie den Speicherort der aktuellen Komponente aus SELECT // Cache -Cache -Komponente, um den Aufruf bei der angetriebenen Komponentenereignis zu erleichtern. Gleichzeitig unterstützt es das Multikomponentenmanagement AutoCompletemap.put (txtobj.id + selectObj.id, this); // Schreiben Sie nach dem Aktualisieren der Schnittstelle den Textwert des Dropdown-Felds der direkten Agentur in das Textfeld var selectIndex = selectObj.selectedIndex. if (selectIndex> 0) // Der erste Inhalt ist im Allgemeinen [bitte auswählen]. Wenn nicht, ändern Sie> 0 zu> = 0 txtOBJ.value = selectObj.options [selectIndex] .Text; } // Cache -Daten- und Cache -Optionsdaten an cacheContainer this.initcache = function () {var select_options = selectObj.options; if (select_options == null || select_options.length == 0) {return; } this.cacheContainer = []; für (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 = "Keine"; selectObj.style.position = "Absolute"; selectObj.style.zindex = 2; selectObj.style.width = selectLength + "px"; selectObj.multiple = "multiple"; txtobj.style.width = selectLength - 5 + "px"; } this.registerEvent = function () {// Dropdown-Box-Ereignis selectObj.ondblclick = this.doublEclickeVent; selectObj.onkeyUp = this.keyupevent; selectObj.onblur = this.onblurevent; selectObj.onfocus = this.onfocusevent; // Textfeld Ereignis txtobj.onfocus = this.onfocusevent; txtobj.onblur = this.onblurevent; txtobj.onkeyUp = this.txtObjkeyupevent; } this.setSelectIdPosition = function () {var Position = this.findposition (txtObj); selectObj.style.left = Position [0] + "px"; selectObj.style.top = Position [3] + 3 + "px"; } this.findposition = function (oelement) {var x2 = 0; var y2 = 0; var width = oelement.offsetwidth; var height = oelement.offseteight; if (typeof (oelement.offsetParent)! posy += oelement.offsettop; } x2 = posx + width; y2 = posy + Höhe; return [posx, posy, x2, y2]; } else {x2 = oelement.x + width; y2 = oelement.y + Höhe; return [oelement.x, oelement.y, x2, y2]; }} // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- = autocompletemap.get (txtobj.id + selectObj.id); if (Event.KeyCode == 13) {Ereignis.ReturnValue = false; var srcelem = document.ActiveLeement; // Erhalten Sie das aktuell fokussierte Objekt var testval = srcelem.id; if (testval == selectObj.id) {autocplete.doublEclickeVEvent (); }}} / *** Fokusereignis* / this.onblurevent = function () {var srcelem = document.activeLement; var testval = srcelem.id; if (testval! = selectObj.id && testval! // Die Auswahlliste ausblenden}}/*** Fokusereignis*/this.onfocusevent = function () {var autoComplete = autoCompletemap.get (txtobj.id + selectObj.id); autocomplete.setSelectidposition (); var srcelem = document.ActiveLeement; var testval = srcelem.id; if (testval == selectObj.id || testval == txtobj.id) {// Fokus auf das aktuelle Objekt if (txtObj.value.length! } var selectIdLength = selectObj.options.length; if (selectIdLength> selectSize) {selectObj.size = selectSize; } else {selectObj.size = selectIdLength; } selectObj.style.display = "block"; }} var mytimeout = null; / ** * Das Textfeldmaus konzentriert sich auf das Release -Ereignis, setze einen Timer ein, führen Sie die Funktion zu jedem bestimmten Zeitpunkt aus, fragen Sie die im Eingabefeld übereinstimmenden Auswahllistendaten und Anzeige */ this.txtObjKeyupeVent = function () {var autocplete = autocompletemap.get (txtobj.id + selectobj.id.id.id); if (event.keycode == 40) {// Klicken Sie im Eingabefeld auf die Tastaturpfeiltaste, und zu diesem Zeitpunkt müssen nicht gesucht werden. Das Suchereignis wird ausgelöst, wenn Eingabe var srcelem = document.activeLeement; var testval = srcelem.id; if (testval == txtObj.id) {selectObj.focus (); if (selectObj.options.length> = 1) selectObj.options [0] .Selected = true; } zurückkehren; } if (autoComplete.mytimeout! } autocpromplete.mytimeout = setTimeout (autoComplete.doajax, 200); } //. function () {var autocplete = autocprompletemap.get (txtobj.id + selectObj.id); // die ursprünglichen Optionen automatisch löschen.Clearalloptions (); autocomplete.setSelectidposition (); var inputStr = txtobj.value; var arrays = autocplete.comPareInput (InputStr); // Daten übereinstimmen, die den Abfragebedingungen erfüllen, wenn (Arrays == null || arrays.length == 0) {selectObj.style.display = "Keine"; zurückkehren; } selectObj.style.display = "block"; für (var i = 0; i <arrays.length; i ++) {var optionParams = arrays [i] .Split (splitflegg); var opt = new option (); opt.Text = optionParams [0]; opt.Value = optionParams [1]; selectObj.add (opt); } if (arrays.length> wähltsize) {selectObj.size = selectSize; } else {selectObj.size = arrays.length; }} / ** * Löschen Sie die ursprünglichen Optionen * / this.clearalloptions = function () {// Löschen Sie die ursprünglichen Optionen 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, ""); // Entfernen Sie die leere Zeichenfolge in der vorderen InputStr = this. // Entfernen Sie die spezielle leere Zeichenfolge if (inputstr == null || inputstr.length == 0) {return this.cacheContainer; } inputStr = disableSpecialCharacter (InputStr); // Spezielle Zeichenverarbeitung var resultarray = new Array (); var k = 0; var selectText = ""; für (var i = 0; i <this.cacheContainer.length; i ++) {selectText = (this.cacheContainer [i] .Split (splitfleg) [0]). Ersetzen Sie (/(^[/s]*)/g, ""); selectText = this.deletspecialspace (selectText); if (CompuleruLes (inputStr, selectText)) {// Übereinstimmung mit der Regel Ergebnis [k] = this.cacheContainer [i]; K ++; }} return Uniquearray (errandarray); } / *** Entfernen Sie die spezielle leere Zeichenfolge* / this.deletspecialSpace = Funktion (srcstr) {var temp = ""; für (var i = 0; i <srcstr.length; i ++) {var charstr = srcstr.charat (i); // Spezialplatz auf der Schnittstelle Unicode = 160, dieser Speicherplatz ist weder Vollbreite noch eine halbe Breite if (charstr.charcodeat (0) == 160) {Fortsetzung; } temp += chancstr; } return temp; }}/*** @param {string} inputStr -Zeichen, die gefiltert werden müssen inputStr = inputStr.Replace (neuer regexp ("//", 'g'), "//."); inputStr = inputStr.Replace (neuer regexp ("//^", 'g'), "//^"); inputStr = inputStr.Replace (neuer regexp ("// {", 'g'), "// {"); inputStr = inputStr.Replace (neuer regexp ("// [", 'g'), "// ["); InputStr = inputStr.Replace (neuer Regexp ("// (", 'g'), "// ("); inputstr = inputstr.Replace (neuer regexp ("// |", 'g'), "// |"); InputStr = InputStr.Replace (New Regexp ("//]. Regexp ("//]", 'g'), "//]"); inputStr = inputStr.Replace (neuer regexp ("//*", 'g'), "//*"); inputStr = inputStr.Replace (neuer regexp ("//+", 'g'), "//+"); inputStr = inputStr.replace (neuer regexp ("//?", 'g'), "//?"); Rückgabe inputStr; } /*** Übereinstimmende Regeln* @param {String} InputStr -Eingabefeld, übereinstimmen mit der Bedingung* @param {String} SelectText ist mit Text übereinstimmt. } / *** doppelte Daten filtern* @param {Object} arr Ergebnisarray* / Funktion uniquearray (arr) {if (arr == null || arr.length == 0) {return arr; } return arr.Reverse (). Join (","). Übereinstimmung (/(*^, weise+)(?!.*/ 1)/ig) .Reverse (); } / *** Fügen Sie eine benutzerdefinierte Funktion hinzu, die Sie auf der ursprünglichen Onload -Funktion ausführen können. if (typeof window.onload! = 'function') {window.onload = func; } else {window.onload = function () {Oldonload (); func (); }}}}Einführung von Tool JS, um chinesische Charaktere in Pinyin umzuwandeln
pinyinhanshi.js
/ ** * Man -Konvertierung zum Pinyin -Werkzeug JS */ var key2Code = {65: "A", 66: "B", 67: "C", 68: "D", 69: "E", 70: "F", 71: "G", 72: "H", 73: 74: "J", 75: 75: 75: 75: 75: 75: 75: ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", "," "N", 79: "O", 80: "P", 81: "Q", 82: "R", 83: "S", 84: "T", 85: "U", 86: "V", 87: "W", 88: "x", 89: "Y", 90: ZE. 49: ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", 1 ",", 50: ",", ",", ",", ",", ",", ",", ", Sie), 50:", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ", "öze ich "5", 54: "6", 55: "7", 56: "8", 57: "9", 48: "0"}; var bell = {0xb0a1: "a", 0xb0a3: "ai", 0xb0b0: "an", 0xb0b9: "ang", 0xb0bc: "ao", 0xb0c5: "ba", 0xb0d7: "bai, 0xB0df:" Banb0e ", 0xb0e", 0xB0df: "Banb0e", 0xb0e ", 0xB0D: 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: ", 0xB3E9:", 0xB3E9: ",", 0xB3E9 ", 0xB3E9:", ", 0xB3E9:", ", 0xB3E9:", ", 0xB3E9:", ", 0xB3E9:", ", 0xB3E9:", ",", 0xB3e9 ",", 0xB3e9 ",", 0xB3e9 "," chig ", 0xb3e 0xb4a7: "Chuai", 0xb4a8: "Chuan", 0xb4af: "Chuang", 0xb4b5: "Chui", 0xb4ba: "Chun", 0xb4c1: "Chuo", 0xb4c3: "Ci", 0xb4cf: "Cong. "Cu", 0xb4da: "Cuan", 0xb4dd: "cui", 0xb4e5: "Cun", 0xb4e8: "Cuo", 0xb4ee: "Da", 0xb4f4: "Dai", 0xb5a2: "Dan", 0xb5b1: " 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: "gen", 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", 0xBB1: "hua", 0xBBB6: "Hua", 0xbbc4: "Huang", 0xbbd2: "Hui", 0xbbe7: "Hun", 0xbbed: "huo", 0xbbf7: "ji", 0xbcce: "jia", 0xbcdf: "jian", 0xbda9: "Jiag", "Jiag", "Jiaga", 0xbda9: ",", ",", "," Jiaga ",", ", 0xbda9", "Jiag", "Jiag", "Jiag", "Jiag", ",", ",", ", 0xbda9:", ",", ",", ",", ",", ", 0xbda9". 0xbdd2: "jie", 0xbded: "Jin", 0xbea3: "Jing", 0xBebc: "Jiong", 0xbebe: "jiu", 0xbecf: "Ju", 0xBee8: "Juan", 0xbeeef: "JUe", 0xbef9: "Kai", 0xbfaf: "kan", 0xbfb5: "kang", 0xbfbc: "kao", 0xbfc0: "ke", 0xbfcf: "ken", 0xbfcf: "ken", 0xbfd3: "keng", 0xbfd5: "Kong", 0xbfd9 ", 0xbfd5:", " 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: "LiaB. "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: "maeng", 0xc3a8: ",", "muxc3a8:" 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: 0xc9ae: "seng", 0xc9af: "sha", 0xc9b8: "Shai", 0xc9ba: "Shan", 0xc9ca: "Shang", 0xc9d2: "Shao", 0xc9dd: "Sheg", 0xc9e9: "Sheng", 0xc9f9: 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: "tan", 0xCC0: "tang", 0xCCD: "tao", 0xccd8: "te", 0xccd9: "Teng", 0xccdd: "Ti", 0xccc: "Tian", 0xccf4: "Tiao", 0xccf9: "Tie", 0xccfc: "Ting", 0xcda8: "Tong. 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", 0xd1b9: "Ya", 0xd1. "yang", 0xd1fb: "yao", 0xd2ac: "ye", 0xd2bb: "yi", 0xd2f0: "yin", 0xd3a2: "ying", 0xd3b4: "yin", 0xd3b5: "Yug. "yuan", 0xd4bb: "yue", 0xd4c5: "yun", 0xd4d1: "Za", 0xd4d4: "Zai", 0xd4db: "Zan", 0xd4df: "Zang", 0xd4e2: "Zao", 0xd4f0: "ZEIO", 0xd4f0: "ZEIO,", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", " 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: Zhua, 0xd7a8: ", Zhuan", "Zhua", 0xd7a8: ",", "," Zhua ", 0xd7a8:", ",", "Zhua", 0xd7a8: ",", "," Zhua ",", ",", ",", ",", 0xd7a8 ",", ",", ",", ",", ", 0xd7a8:", ",", ",", ",", ", 0xd7a8:", " "Zhuan", 0xd7b5: "Zhui", 0xd7bb: "Zhun", 0xd7bd: "Zhuo", 0xd7c8: "Zi", 0xd7d7: "Zong", 0xd7de: "Zou", 0xd7e2: "Zu", 0xd7ec ", 0xd7ec", 0xd7ea ", 0xd7ec", 0xd7ea, 0xd7ec: "Zui", 0xd7f0: "Zun", 0xd7f2: "Zuo"}; var bellArray = new Array (); var pn = ""; Funktion Pinyin (char) {if (! char.charCodeat (0) || char.charCodeat (0) <1328) return char; if (SpellArray [char.charCodeat (0)]) return bellArray [char.charCodeat (0)] execscript ("AscCode = hex (asc (/" + char + "/") ")," vbscript "); asccode = eval ("0x" + asccode); if (! (ASCCODE> 0xB0A0 && ASCCODE <0xd7f3)) return char; für (var i = asccode; (! Zauber [i] && i> 0);) i--; Zauber zurück [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 = "" für (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)); // sonst pstr + = pinyin (str.charat (i)) + ""} return pstr; } function topinyInshengmu (str) {var pstr = "" für (var i = 0; i <str.length; i ++) {if (str.charat (i) == "/n") pstr+= ""; sonst pstr += pinyin (str.charat (i)). charat (0); // sonst 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 } index.html[html] Kly Copy View-Code-Fragmente anzeigen, die in meinen Codefragmenten auf Code abgeleitet sind. src = "js/pinyinhanze topinyInshengmu (selectText) .Indexof (inputStr)! = -1 || topinyInonly (selectText) .Indexof (inputStr)! = -1; } addloadevent (func); Funktion func () {var textObj = document.getElementById ("txtDisplay"); var CityObj = document.getElementById ("Stadt"); var autocomplete = new AutoComplete (TextObj, CityObj, 10, 300); AutoComplete.init (); } </script> </head> <body> <input type="text" id="txtDisplay" /> <select id="city"> <option value="1">Beijing</option> <option value="2"> Shanghai</option> <option value="3">Guangzhou</option> <option value="5">Chongqing</option> <option value="6">Tianjin</option> <option value="7">Shenyang</option> <option value="8">Nanjing</option> <option value="9">Wuhan</option> <option value="10">Changchun</option> <option value="11">Chengdu</option> <option value="12">Dalian</option> <option value="13">Hangzhou</option> <option value="14">Qingdao</option> <option value="15">Jinan</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>Hinweis: Diese Version hat einige Fehler und Inkompatibilität mit anderen (außer iii) Browsern.
Das oben genannte ist das relevante Wissen, das Ihnen über JS über die Implementierung von Combobox -Support -Pinyin -Abruffunktion auf IE8 eingeführt wird. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!