Baru -baru ini saya mengalami masalah JS di IE8. Saya perlu mengimplementasikan (IE8) untuk menggunakan pinyin atau huruf pertama untuk mengambil konten di Select. ComboBox asli hanya dapat mendukung input dan pencarian karakter Cina, dan sekarang saya perlu memperbaikinya. Sekarang saya akan merekam metode implementasi langkah demi langkah. Fungsinya sederhana, dan mungkin ada bug dan kekurangan untuk referensi belajar. (Artikel ini hanya memberikan pembelajaran ide dan cadangan. Dalam situasi aktual, itu perlu digunakan dalam mode kompatibilitas IE8 atau IE, sehingga browser lain tidak diperhitungkan)
Struktur Direktori:
tes
| --js
| --index.html
Tambahkan halaman indeks
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">Chongqing</option> <option value="6">Tianjin</option> <option value = "7"> shenyang </pection> <option value = "8"> nanjing </pection> <option value = "9"> wuhan </pection> <option value = "10"> changchun </pection> <option value = "11"> chengdu </pection> <opsi value = "12"> Dalian value </Option = "13"> Option = 13 "</option> </Option =" 12 "> Dalian </Option> </Option =" 13 "Option =" Option = "Option =" Option = "Option =" 12 "> Option </Option> </Option = 13" 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>
Efek: Mulai menyembunyikan kotak daftar drop-down Pilih. Saat mengklik kotak teks Input, tampilkan ke bagian bawah kotak input. Setelah pilihan selesai, sembunyikan Pilih.
Implementasi JS:
Jika halaman memiliki banyak tempat untuk mengimplementasikan fungsi-fungsi tersebut, Anda perlu menggunakan pemikiran yang berorientasi pada objek dan menggunakan kembali kode sebanyak mungkin. Kita perlu menyesuaikan koleksi seperti AP.
AutoComplete.js
Function Map () { / ** Array untuk menyimpan tombol (digunakan untuk traversal)* / this.keys = array baru (); / ** Simpan data*/ this.data = objek baru (); / ** * Masukkan key-value pair * @param {string} key * @param {objek} value */ this.put = function (key, value) {if (this.data [key] == null) {this.keys.push (key); } this.data [key] = value; }; / ** * Dapatkan nilai yang sesuai dengan tombol * @param {string} key * @return {objek} nilai */ this.get = function (key) {return this.data [key]; }; / *** Hapus pasangan nilai-kunci* @param {string} key*/ this.remove = function (key) {this.keys.remove (key); this.data [key] = null; }; / ** * Melintasi peta dan mengeksekusi fungsi pemrosesan * * @param {function} fungsi fungsi panggilan balik (key, value, index) {..} */ this.each = function (fn) {if (typeof fn! = 'Function') {return; } var len = this.keys.length; untuk (var i = 0; i <len; i ++) {var k = this.keys [i]; fn (k, this.data [k], i); }}; / *** Dapatkan array nilai-kunci (mirip dengan entriSSet java ())* @Return array objek nilai kunci {key, value}*/ this.entrys = function () {var len = this.keys.length; entri var = array baru (len); untuk (var i = 0; i <len; i ++) {entri [i] = {key: this.keys [i], value: this.data [i]}; } return entri; }; / *** Tentukan apakah peta kosong*/ this.isempty = function () {return this.keys.length == 0; }; / *** Dapatkan jumlah pasangan nilai kunci*/ this.size = function () {return this.keys.length; }; / ** * Tulis ulang ToString */ this.toString = function () {var s = "{"; untuk (var i = 0; i <this.keys.length; i ++, s+= ',') {var k = this.keys [i]; s+= k+"="+this.data [k]; } s+= "}"; kembali S; }; } Array.prototype.remove = function (s) {for (var i = 0; i <this.length; i ++) {if (s == ini [i]) this.splice (i, 1); }}Sekarang kita perlu menulis file entri pemuatan program, yang digunakan untuk meneruskan input dan memilih objek, dan kemudian melakukan serangkaian operasi seperti mengikat peristiwa.
var autoCompletemap = peta baru (); // wadah komponen, yang nyaman untuk menelepon ketika acara komponen didorong, dan mendukung manajemen multi-komponen var splitfleg = "_"; //Separator/** * Text box, drop-down box is combined into an automatic completion component* @param {Object} txtObj Text box object* @param {Object} selectObj drop-down box object* @param {int} selectSize Display the number of drop-down boxes* @param {int} selectLength Length of drop-down box*/ function AutoComplete(txtObj, selectObj, selectSize, selectLength) {this.cachecontainer = array baru (); // Cache Container, digunakan untuk menangani konten dalam opsi untuk Cachecontainer saat halaman baru saja dimuat. This.init = function () {this.initcache (); // data cache, cache data opsi ke cachecontainer this.initcss (); // inisialisasi css dan sembunyikan pilih ini.registerevent (); // Daftarkan acara this.setselectIdposition (); // Atur lokasi Pilih // Cache Current Component untuk memfasilitasi Panggilan saat Acara Komponen digerakkan. Pada saat yang sama, ini mendukung manajemen multi-komponen autocompletemap.put (txtobj.id + selectoBj.id, ini); // Setelah antarmuka disegarkan, tulis nilai teks kotak drop-down agen langsung ke kotak teks var selectIndex = selectoBj.selectedIndex; if (selectIndex> 0) // Konten pertama umumnya [silakan pilih]. Jika tidak, ubah> 0 ke> = 0 txtoBj.value = selectoBj.options [selectIndex] .text; } // Data cache dan data opsi cache ke cachecontainer this.initcache = function () {var select_options = selectoBj.options; if (select_options == null || select_options.length == 0) {return; } this.cachecontainer = []; untuk (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 = "none"; selectoBj.style.position = "absolute"; sfectoBj.style.zindex = 2; selectoBj.style.width = selectLength + "px"; selectoBj.multiple = "multipel"; txtobj.style.width = selectLength - 5 + "px"; } this.registerevent = function () {// Event kotak drop-down selectoBj.ondblClick = this.doubleclickevent; selectobj.onkeyup = this.keyupevent; selectobj.onblur = this.onblurevent; selectoBj.onfocus = this.onfocuseVent; // Kotak teks acara txtobj.onfocus = this.onfocuseVent; txtobj.onblur = this.onblurevent; txtobj.onkeyup = this.txtoBjKeyupevent; } this.setselectIdposition = function () {var position = this.findposition (txtoBj); sfectoBj.style.left = position [0] + "px"; sfectoBj.style.top = position [3] + 3 + "px"; } this.findposition = function (oElement) {var x2 = 0; var y2 = 0; var width = oelement.offsetWidth; var tinggi = oelement.offsetHeight; if (typeOf (oElement.OffsetParent)! = 'tidak terdefinisi') {untuk (var posx = 0, posy = 0; oElement; oElement = oElement.offsetParent) {posx += oElement.offsetleft; Posy += oelement.offsettop; } x2 = posx + lebar; y2 = posy + tinggi; return [posx, posy, x2, y2]; } else {x2 = oElement.x + lebar; y2 = oelement.y + tinggi; return [oelement.x, oelement.y, x2, y2]; }} // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- = autoCompleteMap.get (txtoBj.id + selectoBj.id); if (event.keycode == 13) {event.returnValue = false; var srcelem = document.activeElement; // Dapatkan objek yang saat ini terfokus var testval = srcelem.id; if (testVal == selectoBj.id) {autoComplete.doubleclickEvent (); }}} / *** Event fokus* / this.onblureVent = function () {var srcelem = document.activeElement; var testVal = srcelem.id; if (testVal! = selectoBj.id && testVal! = txtoBj.id) {// Jika kotak input saat ini atau daftar pilih tidak difokuskan, selectoBj.style.display = "none"; // Sembunyikan daftar pilih}}/*** Event fokus*/this.onfocuseVent = function () {var autoComplete = autoCompeteMap.get (txtobj.id + selectoBj.id); autocomplete.setselectIdposition (); var srcelem = document.activeElement; var testVal = srcelem.id; if (testVal == selectoBj.id || testVal == txtoBj.id) {// Fokus pada objek saat ini if (txtoBj.value.length! = 0) {// Ketika ada karakter dalam kotak input, tidak ada operasi yang dilakukan; } var selectIdlength = selectoBj.options.length; if (selectIdlength> selectSize) {selectoBj.size = selectSize; } else {selectoBj.size = selectIdlength; } selectoBj.style.display = "block"; }} var mytimeout = null; / ** * Mouse kotak teks berfokus pada acara rilis, atur timer, jalankan fungsi pada setiap waktu tertentu, permintaan data daftar pilih yang cocok di kotak input dan tampilkan */ this.txtObjeyupevent = function () {var autoComplete = autoCompeteMap.get (txtobj.id + selectobj.id); if (event.keycode == 40) {// Klik tombol panah keyboard di kotak input, dan tidak perlu mencari saat ini. Acara pencarian dipicu saat input var srcelem = document.activeElement; var testVal = srcelem.id; if (testVal == txtoBj.id) {selectoBj.focus (); if (selectoBj.options.length> = 1) selectoBj.options [0] .Selected = true; } kembali; } if (autoComplete.mytimeout! = null) {// hapus event eksekusi yang diatur timeed clearTimeout (autoComplete.mytimeout); } autoComplete.mytimeout = setTimeout (autoComplete.doyax, 200); } // ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- {var autoComplete = autoCompleteMaMaP.get (txtoBj.id + selectoBj.id); // Bersihkan opsi asli autoComplete.clearalloptions (); autocomplete.setselectIdposition (); var inputstr = txtobj.value; var arrays = autocomplete.compareInput (inputstr); // Cocokkan data yang memenuhi kondisi kueri jika (array == null || arrays.length == 0) {selectoBj.style.display = "none"; kembali; } selectoBj.style.display = "block"; untuk (var i = 0; i <arrays.length; i ++) {var optionParams = array [i] .split (splitfleg); var opt = opsi baru (); opt.text = optionParams [0]; opt.value = optionParams [1]; selectobj.add (opt); } if (arrays.length> selectSize) {selectoBj.size = selectSize; } else {selectoBj.size = arrays.length; }} / ** * Hapus opsi asli * / this.clearalloptions = function () {// hapus opsi asli 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, ""); // Lepaskan string kosong di inputstr = this.deletespecialSpace (inputstr); // Hapus string kosong khusus if (inputStr == null || inputstr.length == 0) {return this.cachecontainer; } inputstr = disablespecialcharacter (inputstr); // pemrosesan karakter khusus var resultarray = array baru (); var k = 0; var selectText = ""; untuk (var i = 0; i <this.cachecontainer.length; i ++) {selectText = (this.cachecontainer [i] .split (splitfleg) [0]). Ganti (/(^[/s]*)/g, ""); selectText = this.DeletespecialSpace (SelectText); if (comparerules (inputStr, selectText)) {// cocok dengan aturan resultArray [k] = this.cachecontainer [i]; K ++; }} return uniqueArray (resultArray); } / *** Hapus string kosong khusus* / this.deletespecialspace = function (srcstr) {var temp = ""; untuk (var i = 0; i <srcstr.length; i ++) {var charstr = srcstr.charat (i); // Ruang Khusus pada Antarmuka Unicode = 160, Ruang ini bukan lebar penuh atau setengah lebar if (charstr.charcodeat (0) == 160) {lanjutkan; } temp += charstr; } return temp; }}/*** @param {string} Inputstr karakter yang perlu difilter* pemrosesan karakter khusus*/fungsi disablespecialcharacter (inputstr) {inputstr = inputstr.replace (baru regexp ("///", 'g'), "////"); inputstr = inputstr.replace (regexp baru ("//.", 'g'), "//."); inputstr = inputstr.replace (regexp baru ("//^", 'g'), "//^"); inputstr = inputstr.replace (regexp baru ("// {", 'g'), "// {"); inputstr = inputstr.replace (regexp baru ("// [", 'g'), "// ["); inputStr = inputStr.replace(new RegExp("//(", 'g'), "//("); inputStr = inputStr.replace(new RegExp("//|", 'g'), "//|"); inputStr = inputStr.replace(new RegExp("//]", 'g'), "//]"); inputStr = inputstr.replace (baru regexp ("//]", 'g'), "//]"); inputstr = inputstr.replace (regexp baru ("//*", 'g'), "//*"); inputstr = inputstr.replace (regexp baru ("//+", 'g'), "//+"); inputstr = inputstr.replace (regexp baru ("//?", 'g'), "//?"); mengembalikan inputstr; } /*** aturan pencocokan* @param {string} Karakter kotak input inputStr, cocokkan kondisi* @param {string} selectText dicocokkan dengan teks* /function comparerules (inputStr, selectText) {// Cocokkan karakter Cina mengembalikan selectText.indexof (inputStr)! = -1; } / *** Filter data duplikat* @param {object} arr array ARR* / function uniqueArray (arr) {if (arr == null || arr.length == 0) {return arr; } return arr.reverse (). gabungan (","). Cocokkan (/(ajah^,....+)(?!.*/ 1)/ig) .reverse (); } / *** Tambahkan fungsi kustom untuk dieksekusi pada onload asli* @param {objek} func memuat fungsi* / function addloadEvent (func) {var oldonload = window.onload; if (typeof window.onload! = 'function') {window.onload = func; } else {window.onload = function () {oldonload (); func (); }}}}Memperkenalkan alat JS untuk mengubah karakter Cina menjadi 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 "," 1 "," 1 "," "5", 54: "6", 55: "7", 56: "8", 57: "9", 48: "0"}; var mantra = {0xb0a1: "a", 0xb0a3: "ai", 0xb0b0: "an", 0xb0b9: "ang", 0xb0bc: "ao", 0xb0c5: "ba", 0xb0d7: "bai", 0xb0df: "Ba", 0xb0d7: "bai", 0xb0df: "Ba", 0xb0d7: "bai", 0xb0df: "Ba", 0xb0d7: "bai", 0xb0df: "Ba", 0xb0d7: "Bai", 0xB0DF: "BA", 0XB0D7: "BAI", 0XB0DF: " "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", 0xb4c1: "Chuo", 0xb4c3: "ci", 0xb4c1: "chuo", 0xb4c3: "ci", 0xb4c1: "chuo", 0xb4c3: "ci", "ci" "" "" "con", "CONG4," COB4 ", 0XB4C3:" CI "," CI "," CI "," CI "," CI "," CI "," CI "," CI "," CI "," CI "," CI "," CI "," CI "," CI "," CI "," CI "," CI "," CI "," 0xb4d6: "Cu", 0xb4da: "Cuan", 0xb4dd: "Cui", 0xb4e5: "Cun", 0xb4e8: "Cuo", 0xb4ee: "Da", 0xb4f4: "Dai", 0xb5a2: " "Dao", 0xb5c2: "de", 0xb5c5: "Deng", 0xb5cc: "di", 0xb5df: "Dian", 0xb5ef: "Diao", 0xb5f8: "Die", 0xb6a1: "Ding", 0xb6aa: ":" "," DING6: "DING", 0XB6A1: " "Dou", 0xb6bc: "du", 0xb6cb: "Duan", 0xb6d1: "dui", 0xb6d5: "dun", 0xb6de: "duo", 0xb6ea: "e", 0xb6f7: "EN", 0xB6F: "ER", "ER", 0XB6F7: " 0xb7bb: "fang", 0xb7c6: "fei", 0xb7d2: "fen", 0xb7e1: "feng", 0xb7f0: "fo", 0xb7f1: "fou", 0xb7f2: "fu", 0xb8c1: ", 0xb7f2:" fu ", 0xb8c1:", "GA", 0xB8: 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xB8, 0xb8d4: "Gang", 0xb8dd: "Gao", 0xb8e7: "ge", 0xb8f8: "gei", 0xb8f9: "gen", 0xb8fb: "Gen", 0xb9a4: "gong", 0xb9b3: "gu", 0xb9: "gong", 0xb9b3: "gu", 0xb9: "gong", 0xb9b3: "gu", 0xb9: "gong", 0xb9b3: "goU", 0xb9: "gong", 0xb9b3: "goU", 0xb9 "," gong ", 0xb9b3:" goU "," goU "", "gong", 0xB9B3: "GOU", "GOU": "GUB9", 0XB9B3: "GOU", 0XB9 "" 0xb9d4: "guai", 0xb9d7: "guan", 0xb9e2: "guang", 0xb9e5: "gui", 0xb9f5: "pistol", 0xb9f8: "guo", 0xb9fe: "ha", 0xba1: "hai", "hai", "hab", "hai", "haba1," haa "," haa ":" haba1, "haa," haa "," haa, "haa", "haa", "haa", "haa", 0xb9, " 0xbabe: "hao", 0xbac7: "he", 0xbad9: "hei", 0xbadb: "hen", 0xbadf: "heng", 0xbae4: "hong", 0xbaed: "hou", 0xbaf4: "hu", 0xbba8: "hou", 0xbaf4: "hu", 0xbba8: "" hou ", 0xbaf4:" hu ", 0xbba8:" "hou", 0xbaf4: "hu", 0xbba8: "" hou "," hu ", 0xbba8:" "hou", "hu", 0xbba8: "" "" "" "" hu ", 0xbba8:" "" "" "" "" hU ", 0xBBA8:" "HOU", "HU", 0XBBA8: " "hua", 0xBBC4: "huang", 0xBBD2: "hui", 0xBBE7: "hun", 0xBBED: "huo", 0xBBF7: "ji", 0xBCCE: "jia", 0xBCDF: "jian", 0xBDA9: "jiang", 0xBDB6: "jia", 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", 0xbfcf: "Ken", 0xBfd3: "KENG", 0XBFD5: "KEN", 0xBFD3: "KENG", 0XBFD5: "KEN", 0XBFD3: "KENG", 0XBFD5: "KEN", 0XBFD3: "KENG", 0XBFD5: "KEN", 0XBFD3: "KENG", 0XBFD5: " 0xbfdd: "Ku", 0xbfe4: "Kua", 0xbfe9: "Kuai", 0xbfed: "Kuan", 0xbfef: "Kuang", 0xbff7: "Kui", 0xc0a4: "Kun", 0xc0a8: "KUI", 0XC0A4: "KUN", 0XC0A8: " "Lai", 0xC0B6: "LAN", 0xC0C5: "Lang", 0xc0cc: "Lao", 0xc0d5: "Le", 0xc0d7: "Lei", 0xc0e2: "Leng", 0xc0e5: "Li", 0xc19: "", "LiG1," LiG1, "LiG1," LiG. "LiG." LiG. " "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: "meng", 0xC3A8: "mao", 0xC3B4: "me", 0xc3b5: "mei", 0xc3c5: "pria", 0xc3c8: "Meng", 0xc3d0: "mi", 0xc3de: "mian", 0xc3e7: "miao", 0xc3ef: "mie", 0xc3f1: "min", 0xc3: "mie", 0xc3f1: "min", 0xc3f: "mie", 0xc3f1: "min "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", 0xc4f1: "niao", 0xc4f3: "nie", 0xc4f1: "niao", 0xc4f3: "nie", 0xc4f1: "niao", 0xc4f3: "nie", 0xc4f1: "niao" " 0xc5a3: "niu", 0xc5a7: "nong", 0xc5ab: "nu", 0xc5ae: "nv", 0xc5af: "nuan", 0xc5b0: "nue", 0xc5b2: "nuo", 0xc5b6: "o", 0xc5b2: "nuO", 0xc5b6: "o", "" " 0xc5c4: "pai", 0xc5ca: "Pan", 0xc5d2: "pang", 0xc5d7: "pao", 0xc5de: "pei", 0xc5e7: "pena", 0xc5e9: "peng", 0xc5f7: "pi", 0xc5e9: "Peng", 0xc5f7: "pi", 0xc5: "peng", 0xc5f7: "pi", pi ", 0xc5:" peng ", 0xc5f7:" pi ", pi", "pi", 0xc6 0xc6b2: "Pie", 0xc6b4: "pin", 0xc6b9: "ping", 0xc6c2: "po", 0xc6cb: "pu", 0xc6da: "qi", 0xc6fe: "qia", 0xc7a3: "qian", 0xc6fe: "qia", 0xc7a3: "qian", 0xc6fe: "qia", 0xc7a3: "qian", "qi7b9", "qi7", 0xc7a3: "qian", "qian", "qian", "qian", "qian", "qian", "qi7", 0xc7 ", 0xc7", 0xc7 ", 0xc7", 0xc7 ", 0xc7", 0xc7, "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", 0xc8: "ren", 0xc8d3: "rong", 0xc8d5: "ri", 0xc8d6: "rong", 0x8: "Ri", 0xc8d6: "rong", "rong", "rong", " 0xc8ed: "ruan", 0xc8ef: "rui", 0xc8f2: "run", 0xc8f4: "ruo", 0xc8f6: "sa", 0xc8f9: "sai", 0xc8fd: "san", 0xc9a3: "sang", 0xc9: "San", 0xc9a3: "Sang", 0xc9 0xc9ad: "sen", 0xc9ae: "seng", 0xc9af: "sha", 0xc9b8: "shai", 0xc9ba: "shan", 0xc9ca: "shang", 0xc9d2: "shao", 0xc9dd: "she", "0xc9d2:" shao ", 0xc9dd:" She "," 0xc9: "" "" " 0XCAA6: "SHI", 0XCAD5: "Shou", 0xcadf: "Shu", 0xcba2: "Shua", 0xcba4: "Shuai", 0xcba8: "Shuan", 0xcbaa: "Shuang", 0xcbad: "Shuan", 0xcbaa: "Shuang", 0xcbad: "Shuan", 0xcbaa: "Shuang", 0xcbad: "Shuan", 0xcbaa: "Shuang", 0xcbad: "Shuan", 0xcbaa: "Shuang", 0xcbad: "Shuan", 0xcbaa: "Shuang", 0xcbad: "Shuan", 0xcbaa: "Shuang", 0xcbad: "Shuan", 0xcbaa: "Shuang", 0xCBAD: "Shuan" " "Shuo", 0xcbc9: "Song", 0xcbd1: "Sou", 0xcbd4: "Su", 0xcbe1: "Suan", 0xcbe4: "Sui", 0xcbef: "Sun", 0xcbf2: "SUO", 0XCBFA: "", "" TA "," TA ", 0XCBF2:" SUO ", 0XCBFA:" "," TA "," TA "," TA "," TA ", 0XCBF:" TA ", 0XCBF:" 0xcc0: "tang", 0xccd: "tao", 0xccd8: "te", 0xccd9: "teng", 0xccdd: "ti", 0xccec: "tian", 0xccf4: "tiao", 0xccf9: "tie", 0xccfc: "ting", 0xcf9: "tie", 0xccfc: "ting", 0xcf9: "Tie", 0xccfc: "ting", "" "," "", 0xcf9: 0xcf9: ”, 0xccfc:” Ting ", 0xcf9: 0xcf9: 0xcf9: 0xccfc: 0xcf1, 0xcf9: 0xccf9: 0xccf9: 0xccf9: 0xccf9, 0xccf9: 0xccf. 0xcdb9: "tu", 0xcdc4: 0xcdc6: "tui", 0xcdcc: "tun", 0xcdcf: "tuo", 0xcdda: "wa", 0xcde1: "wai", 0xcde3: "wan", "0xcde1:" wai ", 0xcde3:" wan "," 0xcde1: "wai", 0xcde3: "wan", "0xcde1:" wai " 0xcec1: "wen", 0xcecb: "weng", 0xcece: "wo", 0xced7: "wu", 0xCef4: "xi", 0xcfb9: "xia", 0xcfc6: "xian", 0xcfe0: "xiang", 0xc6: "xian", 0xcfe0: "xiang", 0xc6: "xian", 0xcfe0: "xiang", 0xc6: "xian", 0xcfe0: "xiang", 0xc6 0xd0a8: "xie", 0xd0bd: "xin", 0xd0c7: "xing", 0xd0d6: "xiong", 0xd0dd: "xiu", 0xd0e6: "xu", 0xd0f9: "xuan", 0xd1a5: "xu", 0xd0f9: "xuan", 0xd1a5: "xu", 0xd0f9: "xuan", 0xd1a5: "xu", "xUb0f9:" xuan ", 0xd1a5:" xu "," xUb0f9: "xuan", 0xd1a5: "" "" xU5: "XU5:" XU5: "XU5:" XU5: "XU5:" XU5: "XU5:" XU5: "XU5:" XU5: "XU5:" XU5: "XU5:" XU5: "XU5:" XU5: "XU1, 0XD0E. "Ya", 0xd1c9: "yan", 0xd1ea: "Yang", 0xd1fb: "Yao", 0xd2ac: "ye", 0xd2bb: "yi", 0xd2f0: "yin", 0xd3a2: "ying", 0xd3b4: "yin", 0xd3a2: "ying", 0xd3b4: "yin", 0xd3a2: "ying", 0xd3b4: "yin", 0xd3a2: "ying", "0xd3b4:" yin "" yOnd3a2: "ying", 0xd3b4: "yin", "yin", 0xd3a2: "ying", "0xd3B4:" yin "" "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: "Zhai", 0xd5b0: "Zhan", 0xd5c1: "Zhai", 0xD5B0: "ZHAN", 0XD5C1: "ZHAI", 0XD5B0: "ZHAN", 0XD5C1: "ZHAI", 0XD5B0: "ZHAN", 0XD5C1: "ZHAI", 0XD5B0: "ZHAN", 0XD5C1: "ZHAI", 0XD5B0: "ZHAN", 0XD5C1: "ZHAI", 0XD5B0: "ZHAN", 0XD5C1 " 0xd5da: "zhe", 0xd5e4: "zhen", 0xd5f4: "zheng", 0xd6a5: "zhi", 0xd6d0: "zhong", 0xd6db: "zhou", 0xd6e9: "zhu", 0xd6db: "zhou" " "Zhua", 0xd7a8: "Zhuan", 0xd7ae: "Zhuan", 0xd7b5: "Zhui", 0xd7bb: "Zhun", 0xd7bd: "zhuo", 0xd7c8: "zi", 0xd7d7: "zhuo", 0xd7c8: "zi", 0xd7d7: "zhuo", 0xd7c8: "zi", 0xd7d7: "zhuo" ", 0xd7c8:" zi "," 0xd7d7: "zhuo" ", 0xd7c8:" zi "," zi ", 0xd7d7:" zhuO "", "" "" "" "" "" ZHUO ", 0XD7C8:" ZI ", 0XD7D7:" ZHUO ", 0XD7C8:" ZI "," 0XD7D7: "ZHUO" "" "Zu", 0xd7ea: "Zuan", 0xd7ec: "Zui", 0xd7f0: "Zun", 0xd7f2: "Zuo"}; var spellArray = array baru (); var pn = ""; fungsi pinyin (char) {if (! char.charcodeat (0) || char.charcodeat (0) <1328) return char; if (spellArray [char.charcodeat (0)]) mengembalikan spellArray [char.charcodeat (0)] execscript ("asccode = hex (ASC (/" " + char +"/"))", "vbscript"); asccode = eval ("0x" + asccode); if (! (Asccode> 0xB0A0 && ASCCode <0xd7f3)) mengembalikan char; untuk (var i = asccode; (! Spell [i] && i> 0);) i--; return mantra [i]; } function Topinyin (str) {var pstr = "" untuk (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 style = 'ruby-align: center'> " +str.charat (i)) <ruby style = 'rin-rin" center'> " +str.charat (i)) <ruby = piny" +(i) (i) +"<piny" +"<i) <i) <i) <i) <i) <i) <i) <i) <i) (i) +" <i) (i) +"<i) <i) (i) +" <i) <i) (i) +"<i) (i) +". "</rt> </ruby>" // else pstr + = pinyin (str.charat (i)) + ""} return pstr; } function topinyinonly (str) {var pstr = "" untuk (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)) + ""} return pstr; } function Topinyinshengmu (str) {var pstr = "" untuk (var i = 0; i <str.length; i ++) {if (str.charat (i) == "/n") pstr+= ""; selain itu pstr += pinyin (str.charat (i)). charat (0); // else pstr + = pinyin (str.charat (i)) + ""} return pstr; } function pinyInsort (a, b) {var rvalue = 0 untuk (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) if (rvalue = pina> pinb? 1: pina <pinb? -1: 0) if (rvalue = pinb? 1: pina <pinb? -1: 0) if (rvalue = pinb? 1: pinb? Lihat Plain Copy View Kode Fragmen yang Diperoleh ke Kode Saya Fragmen pada Kode <! Doctype html> <html> <head> <meta charset = "utf-8"> <title> </iteme> <type skrip = "Teks/Javascript" src = "js/autocomplete.js"> </script> <script = "script =" JAV/JAV/AUTOComplete.js "> </script> script =" script = "TEKP/JAV/JAV/AUTOCLOPLETE.JS"> </script> script = "TEKP/JAV/JAV/JAV/AUTOCLOPLETE.js src = "js/pinyinhanzi.js"> </script> <script type = "text/javaScript"> // aturan kustom Fungsi comparerules (inputStr, selectText) {// Cocokkan karakter Cina dan pinyin return selectText.indexof (inputstr)! = -1 || topinyinshengmu (selectText) .indexof (inputStr)! = -1 || TopinyinOnly (SelectText) .indexOf (inputStr)! = -1; } addloadEvent (func); fungsi func () {var textoBj = document.geteLementById ("txtDisplay"); var cityobj = document.geteLementById ("city"); var autoComplete = AutoComplete baru (TextObj, CityoBJ, 10, 300); autocomplete.init (); } </script> </head> <body> <input type = "text" id = "txtDisplay"/> <pilih id = "city"> <option value = "1"> beijing </pection> option value = "2"> opsi </option> </option = "3"> guangzhou </option> </option = "5" Chalue = "3"> Option </Option> </option = "5"> Option = "3"> Option </Option> </Option = "5" value = "6"> tianjin </option> <option value = "7"> shenyang </pection> <option value = "8"> nanjing </pection> <option value = "9"> wuhan </pection> <opsi value = "10"> Option = "Option> <Option =" 11 "> Option </Option =" Option = "Option =" Option = "11"> Changchun </Option = "11"> Option = "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 </pection> </dectle> </body> </html>Catatan: Versi ini memiliki beberapa bug dan ketidakcocokan dengan browser lainnya (kecuali III).
Di atas adalah pengetahuan yang relevan yang diperkenalkan kepada Anda tentang fungsi pengambilan pinyin pengambilan pinyin JS pada IE8. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!