เมื่อเร็ว ๆ นี้ฉันพบปัญหา JS ใน IE8 ฉันจำเป็นต้องใช้ (ie8) เพื่อใช้พินอินหรือตัวอักษรตัวแรกเพื่อดึงเนื้อหาที่เลือก Combobox ดั้งเดิมสามารถรองรับการป้อนข้อมูลและการค้นหาของจีนเท่านั้นและตอนนี้ฉันต้องปรับปรุง ตอนนี้ฉันจะบันทึกวิธีการใช้งานทีละขั้นตอน ฟังก์ชั่นนั้นง่ายและอาจมีข้อบกพร่องและข้อบกพร่องสำหรับการอ้างอิงการเรียนรู้ (บทความนี้มีเพียงการเรียนรู้และการสำรองข้อมูลในสถานการณ์จริงจำเป็นต้องใช้ในโหมด IE8 หรือ IE ความเข้ากันได้ดังนั้นเบราว์เซอร์อื่น ๆ จึงไม่ได้นำมาพิจารณา)
โครงสร้างไดเรกทอรี:
ทดสอบ
| --JS
|-index.html
เพิ่มในหน้าดัชนี
index.html
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> </title> <script type = "text/javascript" src = "js/autocyplete.js"> </script> <script type = "text/javascript" <select id = "city"> <option value = "1"> Beijing </optup> <ตัวเลือกค่า = "2"> เซี่ยงไฮ้ </opovie> <ตัวเลือกค่า = "3"> guangzhou </ตัวเลือก> <ตัวเลือกค่า = "4"> เซินเจิ้น </ตัวเลือก> value = "7"> Shenyang </petion> <ตัวเลือกค่า = "8"> หนานจิง </optopt> <ตัวเลือกค่า = "9"> Wuhan </opovie> <ตัวเลือกค่า = "10"> changchun </opovie> value = "14"> Qingdao </petion> <ตัวเลือกค่า = "15"> ajinan </opovie> <ตัวเลือกค่า = "16"> xiamen </opoption> <ตัวเลือกค่า = "17"> fuzhou </opotion >> <opotion ค่า = "18"> xi'an </html>
เอฟเฟกต์: เริ่มซ่อนกล่องรายการแบบเลื่อนลงของการเลือก เมื่อคลิกที่กล่องข้อความอินพุตให้แสดงที่ด้านล่างของกล่องอินพุต หลังจากการเลือกเสร็จสิ้นให้ซ่อนตัวเลือก
การใช้งาน JS:
หากหน้ามีหลายสถานที่ในการใช้งานฟังก์ชั่นดังกล่าวคุณต้องใช้การคิดเชิงวัตถุและนำรหัสกลับมาใช้ใหม่ให้มากที่สุด เราจำเป็นต้องปรับแต่งคอลเลกชันเช่น AP
Autocomplete.js
ฟังก์ชั่นแผนที่ () { / ** อาร์เรย์สำหรับการจัดเก็บคีย์ (ใช้สำหรับ Traversal)* / this.keys = new Array (); / ** จัดเก็บข้อมูล*/ this.data = New Object (); / ** * ใส่คู่คีย์-ค่า * @param {สตริง} คีย์ * @param {object} value */ this.put = function (คีย์, ค่า) {ถ้า (this.data [key] == null) {this.keys.push (คีย์); } this.data [key] = value; - / ** * รับค่าที่สอดคล้องกับคีย์ * @param {String} คีย์ * @return {Object} value */ this.get = function (คีย์) {return this.data [key]; - / *** ลบคู่คีย์-ค่า* @param {สตริง} คีย์*/ this.remove = ฟังก์ชั่น (คีย์) {this.keys.remove (คีย์); this.data [key] = null; - / ** * ข้ามแผนที่และดำเนินการฟังก์ชันการประมวลผล * * @param {ฟังก์ชั่นฟังก์ชันการเรียกกลับ (คีย์, ค่า, ดัชนี) {.. } */ this.each = ฟังก์ชั่น (fn) {ถ้า (typeof fn! = 'function') {return; } var len = this.keys.length; สำหรับ (var i = 0; i <len; i ++) {var k = this.keys [i]; fn (k, this.data [k], i); - / *** รับอาร์เรย์คีย์-ค่า (คล้ายกับ entrySet ของ java ())* @return อาร์เรย์ของวัตถุคีย์-ค่า {คีย์, ค่า}*/ this.entrys = function () {var len = this.keys.length; รายการ var = อาร์เรย์ใหม่ (len); สำหรับ (var i = 0; i <len; i ++) {รายการ [i] = {key: this.keys [i], value: this.data [i]}; } return entrys; - / *** พิจารณาว่าแผนที่ว่างเปล่า*/ this.isEmpty = function () {return this.keys.length == 0; - / *** รับจำนวนคู่คีย์-ค่า*/ this.size = function () {return this.keys.length; - / ** * เขียน toString */ this.toString = function () {var s = "{"; สำหรับ (var i = 0; i <this.keys.length; i ++, s+= ',') {var k = this.keys [i]; s+= k+"="+this.data [k]; } s+= "}"; กลับ s; - } array.prototype.remove = function (s) {สำหรับ (var i = 0; i <this.length; i ++) {ถ้า (s == this [i]) this.splice (i, 1); -ตอนนี้เราต้องเขียนไฟล์รายการโหลดโปรแกรมซึ่งใช้เพื่อส่งผ่านอินพุตและเลือกวัตถุในจากนั้นดำเนินการชุดของการดำเนินการเช่นการเชื่อมเหตุการณ์
var autocompleTemap = แผนที่ใหม่ (); // คอมโพเนนต์คอนเทนเนอร์ซึ่งสะดวกสำหรับการโทรเมื่อมีการขับเคลื่อนเหตุการณ์ส่วนประกอบและรองรับการจัดการหลายองค์ประกอบ var splitfleg = "_"; // ตัวคั่น/*** กล่องข้อความกล่องดรอปดาวน์จะรวมกันเป็นส่วนประกอบที่สมบูรณ์อัตโนมัติ* @param {Object} txtoBj กล่องข้อความวัตถุ* @param {Object} selectObj box drop-down box* @param {int} selectsize การแสดงจำนวนกล่องแบบเลื่อนลง SELECTSIZE, SELECTLENGTH) {this.CacheContainer = new Array (); // แคชคอนเทนเนอร์ใช้ในการแคชเนื้อหาในตัวเลือกไปยัง CacheContainer เมื่อโหลดหน้าเว็บเพิ่งโหลด this.init = function () {this.initcache (); // ข้อมูลแคชแคชข้อมูลตัวเลือกไปยัง cachecontainer this.initcss (); // เริ่มต้น CSS และซ่อนเลือกสิ่งนี้ registerEvent (); // ลงทะเบียนเหตุการณ์ this.setSelectidPosition (); // ตั้งค่าตำแหน่งของ SELECT // CACHE CURNTER CURNTER COMPONENT เพื่ออำนวยความสะดวกในการโทรเมื่อเหตุการณ์ส่วนประกอบขับเคลื่อน ในขณะเดียวกันก็รองรับการจัดการแบบหลายองค์ประกอบ AutocompleTemap.put (txtoBj.id + selectobj.id, this); // หลังจากรีเฟรชอินเทอร์เฟซเขียนค่าข้อความของกล่องดรอปดาวน์ตัวแทนโดยตรงไปยังกล่องข้อความ var selectIndex = selectObj.SelectedIndex; ถ้า (SelectIndex> 0) // เนื้อหาแรกคือโดยทั่วไป [โปรดเลือก] ถ้าไม่เปลี่ยน> 0 ถึง> = 0 txtoBj.value = SelectObj.options [SelectIndex] .Text; } // ข้อมูลแคชและตัวเลือกแคชไปยัง cacheContainer this.initCache = function () {var select_options = selectoBj.options; if (select_options == null || select_options.length == 0) {return; } this.cacheContainer = []; สำหรับ (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 = "ไม่มี"; SelectObj.style.position = "Absolute"; SelectObj.style.zindex = 2; selectoBj.style.width = selectLength + "px"; selectobj.multiple = "หลาย"; txtobj.style.width = selectLength - 5 + "px"; } this.registerEvent = function () {// Event Box Drop-Down SelectObj.ondBlClick = this.doubleClickEvent; selectobj.onkeyup = this.keyupevent; selectobj.onblur = this.onblurevent; selectobj.onfocus = this.onfocusevent; // กล่องข้อความเหตุการณ์ txtobj.onfocus = this.onfocusevent; txtobj.onblur = this.onblurevent; txtoBj.onkeyup = this.txtoBjkeyupevent; } this.SetSelectIdPosition = function () {var position = this.findPosition (txtObj); selectobj.style.left = ตำแหน่ง [0] + "px"; selectoBj.style.top = ตำแหน่ง [3] + 3 + "px"; } this.findPosition = function (oElement) {var x2 = 0; var y2 = 0; var width = oElement.OffSetWidth; ความสูง var = oelement.offSetheight; if (typeof (oelement.offsetParent)! = 'undefined') {สำหรับ (var posx = 0, posy = 0; oElement; oElement = oElement.OffSetParent) {posx += oelement.offsetleft; posy += oelement.offSettop; } x2 = posx + ความกว้าง; y2 = posy + ความสูง; return [posx, posy, x2, y2]; } else {x2 = oElement.x + ความกว้าง; y2 = oelement.y + ความสูง; return [oelement.x, oelement.y, x2, y2]; - - - = AutocompleTemap.get (txtobj.id + selectobj.id); if (event.keycode == 13) {event.returnValue = false; var srcelem = document.activelement; // รับวัตถุที่มุ่งเน้นในปัจจุบัน var testVal = srcelem.id; if (testVal == selectObj.id) {autocomplete.doubleClickEvent (); }}} / *** เหตุการณ์โฟกัส* / this.onblurevent = function () {var srcelem = document.activeElement; var testval = srcelem.id; if (testVal! = selectObj.id && testVal! = txtObj.id) {// ถ้ากล่องอินพุตปัจจุบันหรือรายการเลือกไม่ได้โฟกัสให้เลือก selectObj.style.display = "ไม่มี"; // ซ่อนรายการเลือก}}/*** เหตุการณ์โฟกัส*/this.onfocusevent = function () {var autocomplete = autocompleTemap.get (txtobj.id + selectoBj.id); Autocomplete.setSelectidPosition (); var srcelem = document.activelement; var testval = srcelem.id; if (testVal == selectObj.id || testVal == txtObj.id) {// โฟกัสบนวัตถุปัจจุบันถ้า (txtoBj.value.length! = 0) {// เมื่อมีอักขระในกล่องอินพุตไม่มีการดำเนินการ; } var selectIdLength = selectObj.options.length; if (selectIdLength> selectSize) {selectObj.size = selectSize; } else {selectobj.size = selectIdLength; } selectObj.style.display = "block"; }} var mytimeout = null; / ** * เมาส์กล่องข้อความมุ่งเน้นไปที่เหตุการณ์การเปิดตัวตั้งค่าตัวจับเวลาดำเนินการฟังก์ชั่นในแต่ละเวลาที่เฉพาะเจาะจงสอบถามข้อมูลรายการเลือกที่ตรงกับกล่องอินพุตและแสดง */ this.txtoBjKeyupEvent = function () {var autocomplete = autocompleTemap.get if (event.keycode == 40) {// คลิกปุ่มลูกศรแป้นพิมพ์ในกล่องอินพุตและไม่จำเป็นต้องค้นหาในเวลานี้ เหตุการณ์การค้นหาจะถูกทริกเกอร์เมื่ออินพุต var srcelem = document.activelement; var testval = srcelem.id; if (testVal == txtObj.id) {selectObj.focus (); if (selectoBj.options.length> = 1) selectoBj.options [0]. selected = true; } กลับ; } if (autocomplete.mytimeout! = null) {// ล้างเหตุการณ์การดำเนินการที่กำหนดเวลา ClearTimeOut (Autocomplete.mytimeout); } autocomplete.mytimeout = settimeout (autocomplete.doajax, 200); } // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ {var autocomplete = autocompleTemap.get (txtobj.id + selectoBj.id); // ล้างตัวเลือกดั้งเดิม Autocomplete.ClearAllOptions (); Autocomplete.setSelectidPosition (); var inputstr = txtoBj.value; arrays var = Autocomplete.CompareInput (inputStr); // จับคู่ข้อมูลที่ตรงกับเงื่อนไขการสืบค้นถ้า (อาร์เรย์ == null || array.length == 0) {selectobj.style.display = "ไม่มี"; กลับ; } selectObj.style.display = "block"; สำหรับ (var i = 0; i <array.length; i ++) {var optoptparams = อาร์เรย์ [i] .split (splitfleg); var opt = ตัวเลือกใหม่ (); opt.Text = optiveParams [0]; opt.value = optionparams [1]; Selectobj.add (opt); } if (array.length> selectSize) {selectObj.size = selectSize; } else {selectobj.size = array.length; }} / ** * ล้างตัวเลือกดั้งเดิม * / this.clearalloptions = function () {// ล้างตัวเลือกดั้งเดิม var nl = selectoBj.options.length; ในขณะที่ (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, ""); // ลบสตริงเปล่าในด้านหน้า inputStr = this.deletespecialspace (inputStr); // ลบสตริงว่างเปล่าพิเศษถ้า (inputstr == null || inputstr.length == 0) {return this.cachecontainer; } inputStr = disableSpecialCharacter (inputStr); // การประมวลผลอักขระพิเศษ var resultarray = new Array (); var k = 0; var selectText = ""; สำหรับ (var i = 0; i <this.cacheContainer.length; i ++) {selectText = (this.cachecontainer [i] .split (splitfleg) [0]) แทนที่ (/(^[/s]*)/g, ""); selectText = this.deletespecialspace (selectText); if (comparerules (inputStr, selectText)) {// การจับคู่กฎ rule resultarray [k] = this.cacheContainer [i]; K ++; }} ส่งคืน UniqueArray (resultArray); } / *** ลบสตริงว่างเปล่าพิเศษ* / this.deletespecialspace = function (srcstr) {var temp = ""; สำหรับ (var i = 0; i <srcstr.length; i ++) {var charstr = srcstr.charat (i); // พื้นที่พิเศษบนอินเตอร์เฟส unicode = 160 พื้นที่นี้ไม่ได้เต็มไปด้วยความกว้างหรือครึ่งความกว้างหาก (charstr.charcodeat (0) == 160) {ดำเนินการต่อ; } temp += charstr; } ส่งคืนอุณหภูมิ; }}/*** @param {string} อักขระ inputstr ที่ต้องกรอง* การประมวลผลอักขระพิเศษ*/ฟังก์ชั่น disableSpecialCharacter (inputStr) {inputStr = inputStR.Replace (ใหม่ regexp ("/////", 'g') inputStr = inputstr.replace (regexp ใหม่ ("//.", 'g'), "//."); inputstr = inputstr.replace (ใหม่ regexp ("//^", 'g'), "//^"); inputStr = inputstr.replace (ใหม่ regexp ("// {", 'g'), "// {"); inputStr = inputstr.replace (ใหม่ regexp ("// [", 'g'), "// ["); inputstr = inputstr.replace (ใหม่ regexp ("// (", 'g'), "// ("); inputStr = inputStr.replace (ใหม่ regexp ("// |", 'g'), "// |"); inputstr = inputstr.replace (ใหม่ regexp ("//]", 'g') regexp ("//]", 'g'), "//]"); inputstr = inputstr.replace (ใหม่ regexp ("//*", 'g'), "//*"); inputStr = inputstr.replace (ใหม่ regexp ("//+", 'g'), "//+"); inputStr = inputstr.replace (ใหม่ regexp ("//?", 'g'), "//?"); ส่งคืนอินพุต; } /*** กฎการจับคู่* @param {String} อักขระอินพุตอินพุตอินพุต, จับคู่เงื่อนไข* @param {string} selectText ถูกจับคู่กับข้อความ* /ฟังก์ชั่นเปรียบเทียบ (อินพุต SelectText) {// จับคู่อักขระภาษาจีนกลับ selectText.indexof (inputstr)! = -1; } / *** ตัวกรองข้อมูลซ้ำซ้อน* @param {Object} arr array array* / function uniquearray (arr) {ถ้า (arr == null || arr.length == 0) {return arr; } return arr.Reverse (). เข้าร่วม (","). Match (/( [idy^, เหมือนกัน+)(?!.*/ 1)/ig) .reverse (); } / *** เพิ่มฟังก์ชั่นที่กำหนดเองเพื่อดำเนินการบน OnLoad ดั้งเดิม* @param {Object} ฟังก์ชั่นการโหลด func* / ฟังก์ชั่น addloadEvent (func) {var oldonload = window.onload; if (typeof window.onload! = 'function') {window.onload = func; } else {window.onload = function () {oldonload (); func (); -แนะนำเครื่องมือ JS เพื่อแปลงอักขระจีนเป็นพินอิน
pinyinhanzi.js
/ ** * การแปลงมนุษย์เป็นเครื่องมือพินอิน JS */ var key2Code = {65: "A", 66: "B", 67: "C", 68: "D", 69: "E", 70: "F", 71: "G", 72: "H", 73: "I", 74: "N", 79: "O", 80: "P", 81: "Q", 82: "R", 83: "S", 84: "T", 85: "U", 86: "V", 87: "W", 88: "X", 89: "Y", 90: "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: "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: "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: 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: "ตาย", 0xb6a1: "ding", 0xb6a: "dou", 0xb6bc: "du", 0xb6cb: "duan", 0xb6d1: "dui", 0xb6d5: "dun", 0xb6de: "duo", 0xb6a: "e", 0xb6f7: "en", 0xb6f8: 0xb7bb: "Fang", 0xb7c6: "Fei", 0xb7d2: "fen", 0xb7e1: "feng", 0xb7f0: "fo", 0xb7f1: "fou", 0xb7f2: "fu", 0xb8c1: 0xb8d4: "Gang", 0xb8dd: "Gao", 0xb8e7: "ge", 0xb8f8: "gei", 0xb8f9: "gen", 0xb8fb: "gen", 0xb9a4: "gong", 0xb9b3: 0xb9d4: "guai", 0xb9d7: "guan", 0xb9e2: "guang", 0xb9e5: "gui", 0xb9f5: "ปืน", 0xb9f8: "guo", 0xb9fe: "ha", 0xbaa1: 0xbabe: "Hao", 0xbac7: "เขา", 0xbad9: "hei", 0xbadb: "Hen", 0xbadf: "Heng", 0xbae4: "Hong", 0xbaed: "Hou", 0xbaf4: "Hu" "Hua", 0xbbc4: "Huang", 0xbbd2: "hui", 0xbbe7: "hun", 0xbbed: "huo" 0xbbf7: "ji", 0xbcce: "Jia", 0xbcdf: "Jian", 0xbcdf: 0xbdd2: "Jie", 0xbded: "Jin", 0xbea3: "Jing", 0xbebc: "Jiong", 0xbebe: "Jiu", 0xbecf: "Ju", 0xbee8: "Juan", 0xbeef: "Jue" "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", 0xbff7: "kui", 0xc0a4: "kun", 0xc0a8: "lai", 0xc0b6: "lan", 0xc0c5: "lang", 0xc0cc: "lao", 0xc0d5: "le", 0xc0d7: "lei", 0xc0e2: "Leng", 0xc0e5: "li", 0xc1a9: "Liang", 0xc1c3: "Liao", 0xc1d0: "Lie", 0xc1d5: "Lin", 0xc1e1: "Ling", 0xc1ef: "liu", 0xc1fa: "Long", 0xc2a5: "Lou", 0xc2ab: "Luan", 0xc2d3: "Lue", 0xc2d5: "lun", 0xc2dc: "luo", 0xc2e8: "ma", 0xc2f1: "mai", 0xc2f7: "man", 0xc3a2: "meng", 0xc3a8: "Mei", 0xc3c5: "Men", 0xc3c8: "Meng", 0xc3d0: "Mi", 0xc3de: "Mian", 0xc3e7: "Miao", 0xc3ef: "Mie", 0xc3f1: "Min", 0xc3f7: 0xc3fe: "mo", 0xc4b1: "mou", 0xc4b4: "mu", 0xc4c3: "na", 0xc4ca: "nai", 0xc4cf: "nan", 0xc4d2: 0xc4db: "nen", 0xc4dc: "neng", 0xc4dd: "ni", 0xc4e8: "nian", 0xc4ef: "niang", 0xc4f1: "niao", 0xc4f3: "nie", 0xc4fa: "niu", 0xc5a7: "nong", 0xc5ab: "nu", 0xc5ae: "nv", 0xc5af: "nuan", 0xc5b0: "nue", 0xc5b2: "nuo", 0xc5b6: "pai", 0xc5ca: "pan", 0xc5d2: "pang", 0xc5d7: "pao", 0xc5de: "pei", 0xc5e7: "ปากกา", 0xc5e9: "Peng", 0xc5f7: "pi", 0xc6a: "พาย", 0xc6b4: "พิน", 0xc6b9: "ping", 0xc6c2: "po", 0xc6cb: "pu", 0xc6da: "qi", 0xc6fe: "Qia", 0xc7a3: "Qian", 0xc7b9: 0xc7d0: "Qie", 0xc7d5: "Qin", 0xc7e0: "Qing", 0xc7ed: "Qiong", 0xc7ef: "Qiu", 0xc7f7: "qu", 0xc8a6: "quan", 0xc8b1: 0xc8bf: "Rang", 0xc8c4: "Rao", 0xc8c7: "Re", 0xc8c9: "ren", 0xc8d3: "Reng", 0xc8d5: "ri", 0xc8d6: "rong", 0xc8e0: 0xc8ef: "rui", 0xc8f2: "run", 0xc8f4: "ruo", 0xc8f6: "sa", 0xc8f9: "Sai", 0xc8fd: "San", 0xc9a3: "Sang", 0xc9a6: "Sao", 0xc9a 0xc9ae: "Seng", 0xc9af: "Sha", 0xc9b8: "Shai", 0xc9ba: "Shan", 0xc9ca: "Shang", 0xc9d2: "Shao", 0xc9dddd: "She", 0xc9e9: 0xcad5: "shou", 0xcadf: "shu", 0xcba2: "shua", 0xcba4: "shuai", 0xcba8: "shuan", 0xcbaa: "Shuang", 0xcbad: "Shui" "เพลง", 0xcbd1: "sou", 0xcbd4: "su", 0xcbe1: "suan", 0xcbe4: "sui", 0xcbef: "sun", 0xcbf2: "suo", 0xcbfa: "ta", 0xcca5: "tao", 0xccd8: "te", 0xccd9: "teng", 0xccdd: "ti", 0xccec: "tian", 0xccf4: "tiao", 0xccf9: "tie", 0xccfc: "ting", 0xcda8: 0xcdc4: 0xcdc6: "tui", 0xcdcc: "tun", 0xcdcf: "tuo", 0xcdda: "wa", 0xcde1: "wai", 0xcde3: "wan", 0xcdf4: 0xcecb: "Weng", 0xcece: "wo", 0xced7: "wu", 0xcef4: "xi", 0xcfb9: "xia", 0xcfc6: "Xian", 0xcfe0: "Xiang", 0xcff4: 0xd0bd: "Xin", 0xd0c7: "Xing", 0xd0d6: "xiong", 0xd0dd: "xiu", 0xd0e6: "xu", 0xd0f9: "xuan", 0xd1a5: "xue" "Yan", 0xd1ea: "Yang", 0xd1fb: "yao", 0xd2ac: "ye", 0xd2bb: "yi", 0xd2f0: "yin", 0xd3a2: "ying", 0xd3b4: "yo", 0xd3b5: "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 0xd5e4: "Zhen", 0xd5f4: "Zheng", 0xd6a5: "Zhi", 0xd6d0: "Zhong", 0xd6db: "Zhou", 0xd6e9: "Zhu", 0xd7a5: "Zhua", 0xd7a "Zhuan", 0xd7ae: "Zhuan", 0xd7b5: "Zhui", 0xd7bb: "Zhun", 0xd7bd: "Zhuo", 0xd7c8: "Zi", 0xd7d7: "Zong", 0xd7de: "zuan", 0xd7ec: "zui", 0xd7f0: "zun", 0xd7f2: "zuo"}; var spellarray = new Array (); var pn = ""; ฟังก์ชั่น pinyin (char) {ถ้า (! char.charcodeat (0) || char.charcodeat (0) <1328) ส่งคืนถ่าน; if (spellarray [char.charcodeat (0)]) return jallarray [char.charcodeat (0)] execscript ("asccode = hex (asc (/" " + char +"/"))", "vbscript"); asccode = eval ("0x" + asccode); if (! (asccode> 0xb0a0 && asccode <0xd7f3)) ส่งคืนถ่าน; สำหรับ (var i = asccode; (! สะกด [i] && i> 0);) i--; return Spell [i]; } ฟังก์ชั่น topinyin (str) {var pstr = "" สำหรับ (var i = 0; i <str.length; i ++) {ถ้า (str.charat (i) == "/n") pstr += "<br>" อื่น ๆ pstr += "<ruby style = 'ruby-align "</rt> </ruby>" // else pstr + = pinyin (str.charat (i)) + ""} return pstr; } ฟังก์ชั่น topinyinonly (str) {var pstr = "" สำหรับ (var i = 0; i <str.length; i ++) {ถ้า (str.charat (i) == "/n") pstr += "<br>" อื่น ๆ pstr += pinyin (str.charat (i)); // pstr + = "" + พินอิน (str.charat (i)); // else pstr + = pinyin (str.charat (i)) + ""} return pstr; } ฟังก์ชั่น topinyinshengmu (str) {var pstr = "" สำหรับ (var i = 0; i <str.length; i ++) {ถ้า (str.charat (i) == "/n") pstr+= ""; else pstr += pinyin (str.charat (i)). Charat (0); // else pstr + = pinyin (str.charat (i)) + ""} return pstr; } ฟังก์ชั่น pinyinsort (a, b) {var rvalue = 0 สำหรับ (var i = 0; i <a.length; i ++) {var pina = pinyin (a.charat (i)) var pinb = pinyin (b.charat (i)) ถ้า (rvalue = pina> pinb? ดูชิ้นส่วนดูรหัสการคัดลอกธรรมดาที่ได้มาจากชิ้นส่วนรหัสของฉันบนรหัส <! doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <script type = "text/javascript" src = "js/autocomplete.js"> </script> src = "js/pinyinhanzi.js"> </script> <script type = "text/javascript"> // ฟังก์ชั่นกฎที่กำหนดเอง (inputstr, selectText) {// จับคู่อักขระภาษาจีน topinyinshengmu (selectText) .indexof (inputstr)! = -1 || topinyinonly (selectText) .indexof (inputStr)! = -1; } addloadEvent (func); ฟังก์ชั่น func () {var textobj = document.getElementById ("txtdisplay"); var cityobj = document.getElementById ("เมือง"); var autocomplete = new Autocomplete (TextObj, CityObj, 10, 300); Autocomplete.init (); } </script> </head> <body> <input type = "text" id = "txtDisplay"/> <เลือก id = "เมือง"> <ตัวเลือกค่า = "1"> Beijing </ตัวเลือก> <ตัวเลือกค่า = "2" value = "6"> tianjin </potion> <ตัวเลือกค่า = "7"> Shenyang </opovie> <ตัวเลือกค่า = "8"> Nanjing </opovie> <ตัวเลือกค่า = "9"> wuhan </opovie> value = "13"> Hangzhou </potion> <ตัวเลือกค่า = "14"> Qingdao </opotion> <ตัวเลือกค่า = "15"> jinan </opoption> <ตัวเลือกค่า = "16"> Xiamen </opovie> value = "20"> Harbin </petion> </select> </body> </html>หมายเหตุ: รุ่นนี้มีข้อบกพร่องและความไม่ลงรอยกันกับเบราว์เซอร์อื่น ๆ (ยกเว้น iii)
ข้างต้นเป็นความรู้ที่เกี่ยวข้องที่แนะนำให้คุณทราบเกี่ยวกับการใช้งาน JS Support Function Retrieval Pinyin Support ใน IE8 ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!